@import "~@kaizen/design-tokens/sass/border";
@import "~@kaizen/design-tokens/sass/color";
@import "~@kaizen/design-tokens/sass/spacing";
@import "~@kaizen/component-library/styles/mixins/forms";
@import "../../mixins";
@import "../mixins";

$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"]';

// Classnames to simulate pseudo states in storybook
$story-className--input-search-hover: ":global(.story__input-search-hover)";
$story-className--input-search-focus: ":global(.story__input-search-focus)";

.wrapper {
  position: relative;
}

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

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

  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-start: $input-padding-with-icon;
  padding-inline-end: $input-padding-after-end-icon;
  font-size: 1rem;
  line-height: 1.5;

  &::-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,
  #{$story-className--input-search-focus} &,
  &:hover,
  #{$story-className--input-search-hover} & {
    @include form-input-placeholder {
      opacity: 0%;
    }
  }
}

.focusRing {
  #{$classname--input}:focus + &,
  #{$story-className--input-search-focus} & {
    $focus-ring-offset: 3px;

    position: absolute;
    background: transparent;
    border-radius: $border-solid-border-radius-curved;
    border-width: $border-focus-ring-border-width;
    border-style: $border-focus-ring-border-style;
    inset: -$focus-ring-offset;
    pointer-events: none;
  }
}

@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} {
    @include form-input-placeholder {
      color: $color-purple-800;
      opacity: $input-placeholder-opacity--default;
    }

    border-color: $color-gray-500;
    background-color: $color-white;
    color: $color-purple-800;
  }

  .focusRing {
    border-color: $color-blue-500;
  }

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

  &:hover,
  &#{$story-className--input-search-hover},
  &:focus-within,
  &#{$story-className--input-search-focus} {
    #{$classname--input} {
      @include form-input-placeholder {
        opacity: 100%;
      }

      border-color: $color-gray-600;
      background-color: $color-gray-200;
    }

    .startIconAdornment {
      opacity: 100%;
    }
  }
}

// Secondary
.secondary {
  #{$classname--input} {
    @include form-input-placeholder {
      color: $color-purple-800;
      opacity: $input-placeholder-opacity--default;
    }

    border-color: transparent;
    background-color: $color-gray-200;
    color: $color-purple-800;
  }

  .focusRing {
    border-color: $color-blue-500;
  }

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

  &:hover,
  &#{$story-className--input-search-hover},
  &:focus-within,
  &#{$story-className--input-search-focus} {
    #{$classname--input} {
      @include form-input-placeholder {
        opacity: 100%;
      }

      border-color: transparent;
      background-color: $color-gray-300;
    }

    .startIconAdornment {
      opacity: 100%;
    }
  }
}

// Reversed
.reversed {
  #{$classname--input} {
    @include form-input-placeholder {
      color: $color-white;
      opacity: $input-placeholder-opacity--reversed;
    }

    background: rgba($color-white-rgb, 0.1);
    color: $color-white;
  }

  .focusRing {
    border-color: $color-blue-300;
  }

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

  &:hover,
  &#{$story-className--input-search-hover},
  &:focus-within,
  &#{$story-className--input-search-focus} {
    #{$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 */