@import "~@cultureamp/kaizen-design-tokens/sass/color";
@import "~@cultureamp/kaizen-component-library/styles/color";
@import "~@cultureamp/kaizen-component-library/styles/animation";
@import "~@cultureamp/kaizen-component-library/styles/layout";
@import "~@cultureamp/kaizen-component-library/styles/border";
@import "~@cultureamp/kaizen-component-library/styles/mixins/forms";

// -----------------------------------------------
// Form Input Primitive
// -----------------------------------------------

// Vars
$input-height: 48px;
$input-focus-border-color-reversed: $kz-color-yuzu-500;
$input-base-padding-horizontal: $ca-grid / 2;
$input-icon-size: 1.25rem; // 20px
$input-placeholder-opacity: 0.5;
$input-disabled-background: $kz-color-ash;
$input-disabled-alpha: 30%;
$input-disabled-opacity: 0.3;
$input-disabled-border-alpha: 50%;

///////////////////////////////////////////////////
// BASE STYLES
///////////////////////////////////////////////////

.wrapper {
  position: relative;
}

.input {
  @include form-input-reset;
  background-color: transparent;
  background-clip: padding-box;
  border: 1px solid transparent;
  border-radius: $ca-border-radius;
  display: block;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0 $input-base-padding-horizontal;
  height: $input-height;
  width: 100%;
  margin-bottom: 2px;

  @include form-input-placeholder {
    opacity: 1;
  }

  &:focus:not([disabled]),
  &:hover:focus:not([disabled]) {
    @include form-input-placeholder {
      opacity: 0;
    }
  }

  &.disabled {
    &:not(.reversed) {
      background: $input-disabled-background;
    }

    @include form-input-placeholder {
      color: add-alpha($ca-base-text-color, $input-disabled-alpha);
    }
  }
}

///////////////////////////////////////////////////
// ICON ADORNMENT STYLES
///////////////////////////////////////////////////

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

.withStartIconAdornment {
  .startIconAdornment {
    @include vertically-center-icon;
    @include ca-position($start: $ca-grid / 2);
  }

  &.withDisabled {
    .startIconAdornment {
      opacity: $input-disabled-opacity;
    }
  }

  .input {
    @include ca-padding(
      $start: $ca-grid + $input-icon-size,
      $end: $input-base-padding-horizontal
    );
  }
}

.withEndIconAdornment {
  .endIconAdornment {
    @include vertically-center-icon;
    @include ca-position($end: $ca-grid / 2);
  }

  &.isDisabled {
    .endIconAdornment {
      opacity: $input-disabled-opacity;
    }
  }

  .input {
    @include ca-padding(
      $start: $input-base-padding-horizontal,
      $end: $ca-grid + $input-icon-size
    );
  }
}

.withStartIconAdornment.withEndIconAdornment {
  .input {
    @include ca-padding(
      $start: $ca-grid + $input-icon-size,
      $end: $ca-grid + $input-icon-size
    );
  }
}

// Default theme
.withStartIconAdornment {
  .startIconAdornment {
    color: $kz-color-wisteria-800;
    opacity: 0.5;
  }

  &.withDisabled {
    .startIconAdornment {
      opacity: 0.3;
    }
  }

  &:hover:not(.withDisabled),
  &:focus-within:not(.withDisabled) {
    .startIconAdornment {
      opacity: 0.7;
    }
  }
}

// Reversed
.withStartIconAdornment.withReversed {
  .startIconAdornment {
    color: $kz-color-white;
    opacity: 1;
  }

  &.withDisabled {
    .startIconAdornment {
      opacity: 0.3;
    }
  }

  &:hover:not(.withDisabled),
  &:focus-within:not(.withDisabled) {
    .startIconAdornment {
      opacity: 1;
    }
  }
}
///////////////////////////////////////////////////
// THEMES
///////////////////////////////////////////////////

// Default
.input.default {
  background-color: $kz-color-white;
  color: $ca-base-text-color;
  border-color: $ca-border-color;
  display: flex;
  align-items: center;

  @include form-input-placeholder {
    color: $ca-base-text-color;
    opacity: $input-placeholder-opacity;
  }

  &:focus:not([disabled]),
  &:hover:focus:not([disabled]) {
    @include form-input-focus-border($ca-border-color-focus);
  }

  &:hover:not([disabled]) {
    border-color: $ca-border-color-hover;
  }

  &.disabled {
    color: add-alpha($ca-base-text-color, $input-disabled-alpha);

    @include form-input-placeholder {
      opacity: $input-disabled-opacity;
    }
  }

  &.error:not(:focus) {
    @include form-input-focus-border($ca-palette-input-validation-negative);
  }
}

// Reversed (Dark Backgrounds)
.input.reversed {
  color: $kz-color-white;
  border-color: $kz-color-white;

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

  &:focus:not([disabled]),
  &:hover:focus:not([disabled]) {
    background: rgba($kz-color-white, 0.1);
    @include form-input-focus-border($input-focus-border-color-reversed);
  }

  &:hover:not([disabled]) {
    background: rgba($kz-color-white, 0.1);
  }

  &.disabled {
    color: add-alpha($kz-color-white, $input-disabled-alpha);
    border-color: add-alpha($kz-color-white, $input-disabled-border-alpha);

    @include form-input-placeholder {
      opacity: $input-disabled-opacity;
    }
  }

  &.error:not(:focus) {
    @include form-input-focus-border($ca-palette-input-validation-negative);

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