//@use '../variables' as *;
//@use 'typography' as *;
//@use 'element-variant' as *;
//
////noinspection ALL
//@mixin input(
//  $namespace,
//  $flexWrapper: true,
//  $placeholderSelector: '__control::placeholder',
//  $withValidationIcons: true,
//  $clearAppearance: true,
//  $focusedSelector: '&:focus-within, &.is-filled'
//) {
//  $self: &;
//
//  position: relative;
//  width: var(--#{$namespace}-width, 100%);
//  text-align: left;
//
//  &__label {
//    @include txt-s-m(#{$namespace}-label);
//
//    display: block;
//    background: var(--#{$namespace}-label-background);
//    color: var(--#{$namespace}-label-color);
//    margin: var(--#{$namespace}-label-margin, 0 0 8px);
//    transition: 0.2s ease-out;
//    transition-property: opacity, color;
//  }
//
//  &__wrapper {
//    @if $flexWrapper {
//      display: flex;
//      align-items: center;
//      width: var(--#{$namespace}-control-width, 100%);
//      height: var(--#{$namespace}-control-height, 40px);
//    }
//
//    position: relative;
//    background: var(--#{$namespace}-background);
//    border-radius: var(--#{$namespace}-border-radius, 16px);
//    border: var(--#{$namespace}-border, 1px solid var(--#{$namespace}-border-color));
//    padding: var(--#{$namespace}-wrapper-padding, 0 15px 0 19px);
//    color: var(--#{$namespace}-color);
//    transition: 0.2s ease-out;
//    transition-property: border-color, border-radius, background-color, color;
//
//    > *:not(:first-child) {
//      margin-left: var(--#{$namespace}-icons-gap, 8px);
//    }
//  }
//
//  &__control {
//    @if $flexWrapper {
//      flex: 1;
//      height: 100%;
//    }
//
//    @include txt-i-m(#{$namespace}-control);
//
//    width: 100%;
//    color: var(--#{$namespace}-control-color);
//    border: none;
//    background: transparent;
//    padding: var(--#{$namespace}-control-padding, 9px 0);
//    caret-color: var(--#{$namespace}-caret-color);
//
//    @if $clearAppearance {
//      appearance: none;
//    }
//
//    &:focus {
//      outline: none;
//    }
//  }
//
//  &#{$placeholderSelector} {
//    @include txt-i-m(#{$namespace}-placeholder);
//
//    color: var(--#{$namespace}-placeholder-color, var(--#{$namespace}-control-color));
//  }
//
//  &__loader {
//    --spinner-color: var(--#{$namespace}-color);
//  }
//
//  @if $withValidationIcons {
//    &__valid-icon,
//    &__invalid-icon {
//      pointer-events: none;
//    }
//  }
//
//  &__bottom {
//    display: flex;
//    justify-content: flex-end;
//    margin: var(--#{$namespace}-bottom-margin, 8px 0 0);
//  }
//
//  &__validation-message {
//    //color: var(--#{$namespace}-validation-message-color, $clr-red-500);
//    flex: 1;
//  }
//
//  &__extra {
//    margin-left: 8px;
//  }
//
//  &.is-loading {
//    #{$self}__wrapper,
//    #{$self}__control {
//      cursor: wait;
//    }
//  }
//
//  &.is-filled {
//    --#{$namespace}-label-color: var(--#{$namespace}-filled-label-color);
//  }
//
//  &.is-invalid {
//    --#{$namespace}-border-color: var(--#{$namespace}-invalid-border-color);
//  }
//
//  &:focus-within:not(.is-readonly):not(.is-disabled):not(.is-loading) {
//    --#{$namespace}-border-color: var(--#{$namespace}-focus-border-color);
//    --#{$namespace}-label-color: var(--#{$namespace}-focus-label-color);
//  }
//
//  &.is-disabled {
//    opacity: var(--#{$namespace}--disabled-opacity, 0.56);
//
//    #{$self}__wrapper,
//    #{$self}__label,
//    #{$self}__control {
//      cursor: not-allowed;
//    }
//  }
//
//  &.is-readonly {
//    #{$self}__wrapper,
//    #{$self}__control {
//      cursor: default;
//    }
//  }
//
//  @content;
//
//  &--secondary,
//  &--tertiary {
//
//    #{$self}__label {
//      opacity: 0;
//      position: absolute;
//      z-index: 1;
//    }
//
//    #{$focusedSelector} {
//      #{$self}__label {
//        opacity: 1;
//      }
//    }
//
//    #{$self}__wrapper:hover:not(.is-readonly):not(.is-disabled):not(.is-loading) {
//      --#{$namespace}-border-color: var(--#{$namespace}-hover-border-color);
//    }
//  }
//
//  &--tertiary {
//    --#{$namespace}-wrapper-padding: 0 15px;
//    --#{$namespace}-control-height: 48px;
//
//    #{$focusedSelector} {
//      --#{$namespace}-control-padding: 19px 0 7px;
//    }
//
//    #{$self}__label {
//      left: 16px;
//      top: 8px;
//    }
//  }
//
//  &--large {
//    --#{$namespace}-control-height: 48px;
//    --#{$namespace}-control-padding: 13px 0;
//  }
//
//  @include element-variant($namespace, '', (
//    'background': ($clr-white-100, $clr-black-300),
//    'border-color': ($clr-white-700, $clr-black-200),
//    'label-color': ($clr-black-150, $clr-black-100),
//    'color': ($clr-black-500, $clr-white-100),
//    'placeholder-color': ($clr-black-100, $clr-black-150),
//    'hover-border-color': ($clr-purple-500, $clr-purple-400),
//    'focus-border-color': ($clr-purple-500, $clr-purple-400),
//    'focus-label-color': ($clr-black-150, $clr-black-100),
//    'filled-label-color': ($clr-black-150, $clr-black-100),
//    'invalid-border-color': $clr-red-500,
//    'caret-color': $clr-purple-500,
//  ));
//}