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

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

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

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

.label-wrapper {
  @include typography-a-8-bold;
  color: color('primary-3');
  border-bottom: $border;
  position: relative;
  padding: ru(.5) ru(1);

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

.label {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.tooltip {
  margin-left: auto;
}

.tooltip-icon {
  @extend %tooltip-icon;
}

.line-1 {
  display: flex;
}

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

  div {
    border: 0;
  }

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

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

    input {
      border-right: 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;
}