@use '../../styles/variables' as *;
@use '../../styles/mixins' as *;
@use 'sass:selector';

.ui-input {
  $self: &;
  overflow: hidden;

  &__wrapper {
    --border-color: var(--input-border-color);
    --border-width: 1px;

    display: block;
    overflow: hidden;
    position: relative;
    background: var(--input-background);
    border-radius: 12px;
    outline: var(--border-width) solid var(--border-color);
    outline-offset: calc(var(--border-width) * -1);
    padding-inline: 16px;
    transition: outline-color .2s ease-out;

    #{$self}:not(.is-disabled) & {
      cursor: text;
    }

    #{$self}:not(.is-disabled):not(.is-readonly) &:hover {
      --border-width: 2px;
    }

    #{$self}:not(.is-readonly).is-focused & {
      --border-width: 2px;
      --border-color: var(--input-focused-border-color);
    }

    #{$self}.is-readonly & {
      cursor: default;
    }

    #{$self}.is-invalid & {
      --border-color: var(--input-invalid-border-color);
    }

    #{$self}.is-disabled & {
      --border-color: var(--input-disabled-border-color);

      background: var(--input-disabled-background);
    }
  }

  &__content {
    position: relative;
    display: flex;
    align-items: center;
  }

  &__control {
    @include txt-i-m;

    padding: 22px 0 8px;
    width: 100%;
    outline: none;
    vertical-align: middle;
    background-color: transparent;
    border: none;
    caret-color: var(--input-caret-color);
    color: var(--input-color);

    &::-ms-reveal,
    &::-ms-clear {
      display: none;
    }

    &:-webkit-autofill {
      -webkit-background-clip: text;
      -webkit-text-fill-color: var(--input-color);
    }

    #{$self}.is-readonly & {
      pointer-events: none;
    }

    #{$self}.is-disabled & {
      color: var(--input-disabled-color);
    }
  }

  &__label {
    @include txt-i-m;

    position: absolute;
    pointer-events: none;
    top: 15px;
    left: 0;
    color: var(--input-label-color);
    transform-origin: 0 0;
    transition-duration: .2s;
    transition-property: transform, color;
    transition-timing-function: linear, ease-out;

    #{$self}.is-focused &,
    #{$self}.has-value & {
      transform: translateY(-7px) scale(0.78);
      color: var(--input-label-filled-color);
    }
  }

  &__bottom {
    @include txt-s-m;

    margin-top: 4px;
    padding-inline: 16px;
    min-height: 14px;
  }

  &__validation-message {
    color: var(--input-validation-message-color);
  }

  &__caption {
    color: var(--input-caption-color);
  }

  @include element-variant('input', '', (
          'border-color': $clr-grey-300,
          'background': $clr-white,
          'caret-color': $clr-cyan-500,
          'color': $clr-black,
          'focused-border-color': $clr-cyan-500,
          'invalid-border-color': $clr-red-500,
          'disabled-border-color': $clr-grey-300,
          'disabled-background': $clr-grey-100,
          'disabled-color': $clr-grey-500,
          'label-color': $clr-grey-400,
          'label-filled-color': $clr-grey-500,
          'validation-message-color': $clr-red-500,
          'caption-color': $clr-grey-600
  ))
}