@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/input' as input;
@use '../../scss/font-mixins' as fonts;
@use '../../scss/breakpoints' as breakpoints;

.input-wrapper {
  @include input.input-wrapper;
}

.content-wrapper {
  display: flex;
  position: relative;
  z-index: 0;
  width: 100%;

  &__right-of-input {
    display: flex;
    position: relative;
  }
}

.input-container {
  $container: &;

  align-items: center;
  padding: 0 0.875rem;
  min-height: calc(2.75rem + 0.25rem); // 44px height + 4px border

  @include input.input-container;

  @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
    min-height: calc(3rem + 0.25rem); // 48px height + 4px border
  }

  &--with-icon {
    padding-right: 0.875rem;
    padding-left: 0;

    &--right {
      padding-left: 0.875rem;
      padding-right: 0;
    }
  }

  &__input {
    @include fonts.input-text;

    margin: 0.5rem 0.125rem;
    padding: 0;

    &--large {
      margin: 0.8438rem 0.125rem;
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      margin: 0.625rem 0.125rem;

      &--large {
        @include fonts.input-text-large;

        margin: 1.3125rem 0.125rem;
      }
    }

    &__icon {
      cursor: pointer;
      margin: 0.1875rem 0.375rem;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        margin: 0.3125rem 0.375rem;
      }
    }
  }

  &--disabled {
    #{$container}__input__icon {
      cursor: initial;
    }
  }
}