@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

$inputState: 'success', 'danger', 'dark', 'primary', 'warn';

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

// vue transition
.clearable-transition {
  &-enter-active {
    animation: clearable-transition 0.22s ease-out;
  }
  &-leave-active {
    animation: clearable-transition 0.22s ease-in reverse;
  }
}

@keyframes clearable-transition {
  0% {
    right: getCssVar(input-default-icon-init-right);
    opacity: 0.2;
  }
  30% {
    opacity: 0.7;
  }
  100% {
    right: getCssVar(input-default-icon-right);
  }
}

@mixin state($color) {
  @include e(original) {
    background: getColor($color, 0.1) !important;
    color: getColor($color);
  }
  @include e(label) {
    color: getColor($color);
  }
  @include e(placeholder) {
    @include m(float) {
      color: getColor($color);
    }
  }
  @include e(icon) {
    color: getColor($color);
    background: getColor($color, 0.1);
    box-shadow: -15px 10px 10px -10px getColor($color, 0.1);
  }
}

/* clears the 'X' from Internet Explorer */
input[class*='#{$namespace}'][type='search']::-ms-clear,
input[class*='#{$namespace}'][type='search']::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* clears the 'X' from Chrome */
input[class*='#{$namespace}'][type='search']::-webkit-search-decoration,
input[class*='#{$namespace}'][type='search']::-webkit-search-cancel-button,
input[class*='#{$namespace}'][type='search']::-webkit-search-results-button,
input[class*='#{$namespace}'][type='search']::-webkit-search-results-decoration {
  display: none;
}
@include b(input) {
  @include set-var-value(color, getCssVar(primary));
}

@include b(input) {
  @include flex(center, flex-start);
  flex-direction: column;
  position: relative;

  // Input state
  @each $state in $inputState {
    @include m(state-#{$state}) {
      @include state($state);
    }
  }

  @include when(square) {
    @include e(wrapper) {
      border-radius: 0px !important;
    }
  }
  @include when(text-white) {
    @include e(original) {
      color: $color-white;
    }
  }
  @include when(transparent) {
    @include e(original) {
      background-color: transparent !important;
    }
  }
  @include when(block) {
    width: 100%;
    @include e(original) {
      width: 100%;
    }
  }
  @include when(focus) {
    &.#{$namespace}-input--has-icon {
      &:not(.#{$namespace}-input--icon-after) {
        @include e(original) {
          padding-left: 40px;
        }
        @include e(icon) {
          box-shadow: 15px 10px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        }

        @include e(placeholder) {
          &:not(.#{$namespace}-input__placeholder-float) {
            left: 48px;
          }
        }
      }
      &.#{$namespace}-input--icon-after {
        @include e(label) {
          left: 44px;
          @include m(placeholder) {
            transform: translate(calc(-3px - 22px), -80%) !important;
          }
        }
      }
    }
    &.#{$namespace}-input--has-color {
      @include e(original) {
        border-bottom: 2px solid getColor(color);
      }

      @include e(icon) {
        color: getColor(color);
      }
      @include e(label) {
        color: getColor(color);

        @include m(placeholder) {
          color: getColor(color);
        }
      }
    }
    &.#{$namespace}-input--icon-after {
      @include e(icon) {
        transform: translate(6px, -6px);
      }
    }
    @include e(original) {
      background: getColor('gray-3');
      padding-left: 15px;
    }
    @include e(icon) {
      box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
      transform: translate(-6px, -6px);
      background: getColor('gray-1');
    }
    @include e(clearable) {
      right: getCssVar(input-default-icon-right);
    }
    @include e(placeholder) {
      &:not(.#{$namespace}-input__placeholder--float) {
        opacity: 0;
        left: 20px;
      }

      @include m(float) {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-3%, -80%);
        font-size: 0.75rem;
      }
    }
  }
  @include when(hovering) {
    @include e(clearable) {
      right: getCssVar(input-default-icon-right);
    }
    &.#{$namespace}-input--icon-clearable {
      @include e(original) {
        // padding-right: 33px;
      }
      &.#{$namespace}-input--icon-eye {
        @include e(original) {
          padding-right: 53px;
        }
      }
    }
  }
  @include when(border) {
    @include e(icon) {
      background: transparent !important;
      box-shadow: none !important;
    }
    @include e(wrapper) {
      border-radius: 0px;
    }
    @include e(affects) {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      pointer-events: none;
      @include m(1) {
        border-bottom: 2px solid getColor('gray-3');
        width: 100%;
        height: 2px;
        position: absolute;
        bottom: 0px;
        transition: getCssVar(transition-ease);
        border-radius: 4px;
      }
      @include m(2) {
        border-bottom: 2px solid getColor('color', 1);
        width: 0%;
        height: 2px;
        position: absolute;
        bottom: 0px;
        transition: getCssVar(transition-ease);
        left: 50%;
        transform: translate(-50%);
        border-radius: 4px;
      }
    }
    @include e(original) {
      background: transparent;
      border-radius: 0px;
    }
    @include when(focus) {
      @include e(affects) {
        @include m(2) {
          width: 100%;
        }
      }
    }
  }
  @include when(shadow) {
    @include e(icon) {
      background: transparent;
      z-index: 100;
      // box-shadow: none !important;
    }
    @include e(affects) {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
      border-radius: inherit;
      pointer-events: none;
      z-index: 10;
      @include m(1) {
        box-shadow: 0px 6px 25px -6px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0px;
        transition: getCssVar(transition-ease);
        z-index: 200;
        border-radius: inherit;
      }
    }
    @include e(original) {
      background: transparent;
      border-radius: 0px;
      border: 2px solid transparent;
    }
    @include when(focus) {
      @include e(icon) {
        background: getColor('background') !important;
        opacity: 1;
        box-shadow: 0px 10px 20px -5px rgba(0, 0, 0, getCssVar('shadow-opacity')) !important;
      }
      @include e(affects) {
        @include m(1) {
          transform: translate(0, 3px);
          box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        }
      }
    }
  }

  @include m(has-label) {
    margin-top: 24px !important;
  }
  @include m(has-icon) {
    @include e(original) {
      padding-left: 38px;
    }

    @include e(placeholder) {
      left: 44px;
    }

    @include e(label) {
      left: 44px;
    }

    @include e(icon) {
      pointer-events: auto !important;
      cursor: pointer;
      &:hover {
        box-shadow: 15px 10px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        // box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        transform: translate(-6px, -6px);
        background: getColor('gray-1');
      }
    }
    &.#{$namespace}-input--icon-after {
      @include e(label) {
        transform: translate(calc(-3px - 30px), -80%);
      }
      @include e(icon) {
        box-shadow: -15px 10px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
        &:hover {
          transform: translate(6px, -6px);
        }
      }
    }
  }
  @include m(icon-after) {
    @include e(clearable) {
      @include set-var-value(input-default-icon-init-right, 30px);
      @include set-var-value(input-default-icon-right, 40px);
    }
    @include e(icon) {
      @include m(password) {
        @include set-var-value(input-default-icon-init-right, 30px);
        @include set-var-value(input-default-icon-right, 40px);
      }
    }

    @include e(original) {
      padding-left: 7px;
      padding-right: 38px;
    }

    &.#{$namespace}-input--icon-clearable.#{$namespace}-input--icon-eye {
      padding-right: 90px;
    }

    @include e(placeholder) {
      left: 13px;
    }

    @include e(icon) {
      left: auto;
      right: 2px;
      box-shadow: -12px 0px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
    }
  }
  @include m(icon-eye) {
    @include e(original) {
      padding-right: 33px;
    }
    &.#{$namespace}-input--icon-after {
      @include e(original) {
        padding-right: 60px;
      }
    }
    &.#{$namespace}-input--icon-clearable {
      @include e(original) {
        padding-right: 56px;
      }
    }
    @include e(clearable) {
      @include set-var-value(input-default-icon-right, 30px);
    }
  }
  @include m(icon-clearable) {
    @include e(original) {
      padding-right: 34px;
    }

    &.#{$namespace}-input--icon-eye {
      @include e(original) {
        padding-right: 56px;
      }
    }
    &.#{$namespace}-input--icon-after {
      @include e(original) {
        padding-right: 62px;
      }
    }
  }

  @include e(wrapper) {
    @include set-component-var(
      'input',
      (
        'default-icon-init-right': 2px,
        'default-icon-right': 8px,
      )
    );

    @include when(disabled) {
      & > * {
        cursor: default;
        user-select: none;
      }
    }

    @include flex(flex-start, center);
    position: relative;
    border-radius: 12px;
    width: 100%;
  }
  @include e(clearable) {
    @include set-var-value(color, getCssVar(text));
    position: absolute;
    right: getCssVar(input-default-icon-init-right);
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;

    width: 22px;
    height: 22px;
    @include flex(center, center);
    border-radius: getCssVar(border-radius-full);

    cursor: pointer;
    background-color: getColor(gray-2);

    .#{$namespace}-icon-close {
      transform: scale(0.7);
    }
  }
  @include e(original) {
    border: 2px solid transparent;
    background: getColor('gray-2');
    color: getColor('text');
    padding: 7px 13px;
    border-radius: inherit;
    transition: getCssVar(transition-ease);
    padding-left: 10px;
    width: 200px;
  }
  @include e(icon) {
    position: absolute;
    right: auto;
    width: 36px;
    height: 36px;
    @include flex(center, center);
    box-shadow: 12px 0px 10px -10px rgba(0, 0, 0, getCssVar('shadow-opacity'));
    transition: getCssVar(transition-ease);
    border-radius: inherit;
    background: getColor('gray-2');
    pointer-events: none;
    left: 2px;
    user-select: none;

    @include m(password) {
      position: absolute;
      right: getCssVar(input-default-icon-right);
      top: 50%;
      transform: translateY(-50%);
      z-index: getCssVar(z-index-popper);
      // background: -color('gray-2');

      width: 22px;
      height: 22px;
      @include flex(center, center);
      border-radius: getCssVar(border-radius-full);

      cursor: pointer;
    }
  }
  @include e(placeholder) {
    position: absolute;
    left: 13px;
    font-size: 0.8rem;
    transition: getCssVar(transition-ease);
    cursor: text;
    user-select: none;
    pointer-events: none;
    height: 100%;
    @include flex(flex-start, center);
    opacity: 0.4;

    @include m(hidden) {
      opacity: 0;
      visibility: hidden;

      &.#{$namespace}-input__placeholder--float {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate(-3%, -80%);
        font-size: 0.75rem;
      }
    }
  }
  @include e(label) {
    position: absolute;
    left: 13px;
    transition: getCssVar(transition-ease);
    cursor: text;
    user-select: none;
    height: 100%;
    @include flex(flex-start, center);

    pointer-events: auto;
    transform: translate(-2px, -77%);
    font-size: 0.75rem;
  }
  @include e(progress) {
    width: 95%;
    position: relative;
    height: 2px;
    background: getColor('gray-2');
    margin-top: 5px;
    overflow: hidden;
    border-radius: 5px;
    @include m(danger) {
      @include meb(bar) {
        background: getColor('danger', 1);
      }
    }
    @include m(warn) {
      @include meb(bar) {
        background: getColor('warn', 1);
      }
    }
    @include m(success) {
      @include meb(bar) {
        background: getColor('success', 1);
      }
    }
    @include m(bar) {
      width: 32%;
      height: 2px;
      max-width: 100%;
      transition: getCssVar(transition-ease);
      border-radius: 5px;
    }
  }
  @include e(message) {
    font-size: 0.7rem;
    padding: 0px 7px;
    padding-top: 2px;
    transition: getCssVar(transition-ease);
    overflow: hidden;

    $messageType: 'success', 'danger', 'warn', 'dark', 'primary';

    @each $message in $messageType {
      @include m($message) {
        color: getColor($message);
      }
    }
  }
  @include e(loading) {
    @include absolute-full;
    border-radius: inherit;
    @include flex(center, center);
    background-color: getColor('gray-2', 0.3);
    z-index: getCssVar(transition-ease);
    cursor: default;

    @include b(icon-loading) {
      transform: scale(0.5);
    }
  }
}