@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/spacing';
@import '../../../styles/utils/forms';

@layer kz-components {
  $input-height: 48px;
  $input-padding-before-start-icon: 1rem;
  $input-padding-between-icon-input: $spacing-sm;
  $input-padding-after-end-icon: $spacing-sm;
  $input-icon-size: 1.25rem; // 20px
  $input-padding-with-icon: calc(
    #{$input-padding-before-start-icon} + #{$input-icon-size} + #{$input-padding-between-icon-input}
  );
  $input-disabled-opacity: 0.3;
  $border-solid-border-radius-curved: $input-height;

  $input-placeholder-opacity--default: 0.7;
  $start-icon-opacity--default: $input-placeholder-opacity--default;
  $input-placeholder-opacity--reversed: 0.8;
  $start-icon-opacity--reversed: $input-placeholder-opacity--reversed;

  // [type="search"] is required to override performance-ui global materialize CSS >:|
  $classname--input: '.input[type="search"]';

  .wrapper {
    position: relative;
  }

  #{$classname--input} {
    @include form-input-reset;

    display: flex;
    align-items: center;
    height: $input-height;
    width: 100%;
    border: $border-solid-border-width $border-solid-border-style transparent;
    border-radius: $border-solid-border-radius-curved;
    padding-block: 0;
    padding-inline: $input-padding-with-icon $input-padding-after-end-icon;
    font-size: 1rem;
    line-height: 1.5;

    @include form-input-placeholder {
      opacity: 100%;
    }

    &::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

    .hasEndIconAdornment & {
      padding-inline-end: calc(
        #{$input-padding-between-icon-input} + #{$input-icon-size} +
          #{$input-padding-after-end-icon}
      );
    }

    &:focus,
    &:hover {
      @include form-input-placeholder {
        opacity: 0%;
      }
    }

    &:focus {
      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
        var(--color-blue-500);
      outline-offset: 1px;
    }
  }

  @mixin vertically-center-icon {
    position: absolute;
    height: $input-icon-size;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
  }

  .startIconAdornment {
    @include vertically-center-icon;

    inset-inline-start: $input-padding-before-start-icon;
  }

  .loadingSpinner {
    margin-top: -2px;
  }

  .endIconAdornment {
    @include vertically-center-icon;

    inset-inline-end: $input-padding-after-end-icon;
  }

  .disabled {
    pointer-events: none;
    opacity: $input-disabled-opacity;
  }

  /* stylelint-disable no-descending-specificity */
  ///////////////////////////////////////////////////
  // THEMES
  ///////////////////////////////////////////////////

  // Default
  .default {
    #{$classname--input} {
      border-color: $color-gray-500;
      background-color: $color-white;
      color: $color-purple-800;

      @include form-input-placeholder {
        color: $color-purple-800;
        opacity: $input-placeholder-opacity--default;
      }
    }

    .startIconAdornment {
      color: $color-purple-800;
      opacity: $start-icon-opacity--default;
    }

    &:hover,
    &:focus-within {
      #{$classname--input} {
        border-color: $color-gray-600;
        background-color: $color-gray-200;

        @include form-input-placeholder {
          opacity: 100%;
        }
      }

      .startIconAdornment {
        opacity: 100%;
      }
    }
  }

  // Secondary
  .secondary {
    #{$classname--input} {
      border-color: transparent;
      background-color: $color-gray-200;
      color: $color-purple-800;

      @include form-input-placeholder {
        color: $color-purple-800;
        opacity: $input-placeholder-opacity--default;
      }
    }

    .startIconAdornment {
      color: $color-purple-800;
      opacity: $start-icon-opacity--default;
    }

    &:hover,
    &:focus-within {
      #{$classname--input} {
        border-color: transparent;
        background-color: $color-gray-300;

        @include form-input-placeholder {
          opacity: 100%;
        }
      }

      .startIconAdornment {
        opacity: 100%;
      }
    }
  }

  // Reversed
  .reversed {
    #{$classname--input} {
      background: rgba($color-white-rgb, 0.1);
      color: $color-white;

      @include form-input-placeholder {
        color: $color-white;
        opacity: $input-placeholder-opacity--reversed;
      }

      &:focus {
        outline-color: var(--color-blue-300);
      }
    }

    .startIconAdornment {
      color: $color-white;
      opacity: $start-icon-opacity--reversed;
    }

    &:hover,
    &:focus-within {
      #{$classname--input} {
        border-color: transparent;
        background-color: rgba($color-white-rgb, 0.2);
      }
    }

    &.default {
      #{$classname--input} {
        border-color: rgba($color-white-rgb, 0.65);
      }
    }
  }
  /* stylelint-enable no-descending-specificity */
}