.date-range-input {
  $block: #{&};

  @include flex(column, nowrap, $whitespace-5);

  &__label {
    color: $color-neutral-8;
  }

  &__input-container {
    @include flex(column, nowrap, $whitespace-3);

    position: relative;
  }

  &__input-wrapper {
    @include flex(row, nowrap, $whitespace-4);
  }

  &__input {
    @include remove-input-styles;
    @include flex(row, nowrap, $whitespace-3, center);

    max-inline-size: 40rem;
    block-size: 3.5rem;
    padding: $whitespace-4 $whitespace-5;
    border: 0.1rem solid $color-neutral-10;

    &::placeholder {
      font-size: $font-size-3;
    }
  }

  &__error-message {
    @include position(absolute, auto, auto, -($whitespace-2));

    color: $color-status-error;
    transform: translateY(100%);
  }
}