@import '../shared/formfields.module.scss';

$border: 1px solid color('neutral-4');

.split-field {
  @extend %form-field;

  .input {
    input {
      padding: 0;
    }
  }
}

.label {
  @include typography-a-8-bold;

  color: color('primary-3');
  border-bottom: $border;
  position: relative;
  padding: ru(.5) ru(1);

  > label {
    color: color('primary-3');
  }
}

.line-1 {
  display: flex;
}

.input {
  flex-shrink: 1.32;
  padding: ru(.5) 0 ru(.5) ru(1);

  input {
  border: 0;
    border-right: $border;
    width: 100%;
  }

  &:last-child {
    flex-shrink: 1;

    input {
      border-right: 0;
    }
  }
}

.split-field-child {
  border: 0;
}

@media #{$IE} {
  .fields-2 {
    flex-basis: 50%;
  }

  .fields-3 {
    flex-basis: calc(100% / 3);
  }
}

/* --  state:focus  -- */
.focused {
  @extend %focused;
}

/* --  state:error  -- */
.hasError {
  @extend %hasError;
}