@use 'styles/variables.scss' as *;
@use './theme.scss' as *;

$input: 'input';

.#{$input} {
  @include input-theme-modifiers();

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 100px;

  &--isCompact {
    .#{$input}__container {
      border-radius: 15px;
      padding: 0 15px;
    }

    .#{$input}__field {
      padding: 2px 0 3px;
      font-size: 12px;
    }

    .#{$input}__label {
      margin-bottom: 4px;
    }
  }

  &--isDisabled {
    .#{$input}__icon {
      color: input-theme-color('primary-color-disabled');
    }

    .#{$input}__container {
      border-color: transparent;
      background-color: input-theme-color('primary-background-disabled');
    }

    .#{$input}__field {
      &::placeholder {
        color: input-theme-color('primary-placeholder-disabled');
      }
    }
  }

  &--isClearable {
    .#{$input}__container {
      padding-right: 15px;
    }
  }

  &--hasIcon {
    .#{$input}__container {
      padding-left: 15px;
    }
  }

  &__label {
    margin-bottom: 9px;
    color: input-theme-color('primary-color');
  }

  &__container {
    display: flex;
    align-items: center;
    border-radius: 10px;
    padding: 2px 20px;
    border: 1px solid input-theme-color('primary-border');
    background-color: input-theme-color('primary-background');

    &:focus-within {
      border-color: input-theme-color('primary-border-focus');
      background-color: input-theme-color('primary-background-focus');
    }

    &--isError {
      border-color: input-theme-color('primary-error-input-border');
    }
  }

  &__field {
    flex-grow: 1;
    padding: 7px 0 9px;
    font-size: 14px;
    line-height: 18px;
    font-weight: 500;
    font-family: $font-family;
    background-color: transparent;
    color: input-theme-color('primary-color');
    border: 0;
    box-shadow: none;
    outline: none;

    &::placeholder {
      color: input-theme-color('primary-placeholder');
      opacity: 1;
    }

    &:disabled,
    &[disabled] {
      color: input-theme-color('primary-color-disabled');
      -webkit-text-fill-color: input-theme-color('primary-color-disabled');
    }
  }

  &__icon {
    flex-shrink: 0;
    margin-right: 10px;
    color: input-theme-color('primary-icon');
  }

  &__clear {
    flex-shrink: 0;
    margin-left: 10px;
  }

  &__error {
    margin-top: 1px;
    color: input-theme-color('primary-error');
  }
}