%input {
  border: 1px solid $c-border--dark;
  font-family: $f-title;
  font-size: rem-calc(14);
  margin: rem-calc(6) 0;
  padding: em-calc(6, 14) em-calc(18, 14) em-calc(5, 14);

  @include breakpoint($small-up) {
    font-size: rem-calc(16);
  } // $small-up
}

%input-placeholder {
  color: $c-text--placeholder;
  user-select: none;
}

input {
  @extend %input;

  &::placeholder {
    @extend %input-placeholder;
  }
}

%alternative-input {
  border-color: $c-brand;
  border-radius: rem-calc(7);
  margin: 0;
}

.alternative-input {
  @extend %alternative-input;
}