/**
  @prop --fw-label-color: Color of the label.
  @prop --fw-hint-color: Color of the hint text.
  @prop --fw-warning-color: Color of the warning text.
  @prop --fw-error-color: Color of the error text.
  @prop --fw-input-border-radius: Border Radius of the input.
*/

@import '../../function-components/field-control.scss';

$label-font: $font-stack-sans !default;
$placeholder-color: $color-smoke-300;
$help-color: $muted-secondary;
$disabled-color: $input-disabled-color;
$error-color: $app-error;
$input-border: #cfd7df;
$input-hover-color: #475867;
$input-focus-color: #2c5cc5;
$input-bg: #fff;
$input-color: $app-primary-black;
$warning-color: $color-casablanca-300;

*,
::after,
::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

:host {
  display: block;
}

// stylelint-disable a11y/media-prefers-reduced-motion
@media screen and (prefers-reduced-motion: reduce) {
  .input-container {
    .input-container-inner {
      transition: none;
    }
  }
}

@mixin stateStyle($_color) {
  border-color: $_color;

  &.has-focus {
    box-shadow: none;
    border-color: $_color;
  }

  &:hover,
  &:focus {
    border-color: $_color;
  }

  & + .help-block {
    color: $_color;
  }
}

.input-container {
  width: inherit;
  height: inherit;
}

// Input Container Style
.input-container-inner {
  display: flex;
  align-items: center;
  width: 100%;
  position: relative;
  border: 1px solid $input-border;
  background-color: $app-light-bg;
  border-radius: var(--fw-input-border-radius, 4px);
  transition: border 0.3s ease;

  &.error {
    @include stateStyle($error-color);
  }

  &.warning {
    @include stateStyle($warning-color);
  }

  .inner__content {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;

    .input__label {
      flex: 1 1 40%;
      display: flex;
      align-items: center;
      margin-inline-start: 8px;

      input {
        width: 100%;
        padding-inline: 0px;
        padding-block: 5px;
        resize: none;
        border: none;
        outline: none;
        box-shadow: none;
        min-height: 24px;
        font-size: $font-size-14;
        font-weight: $font-weight-semibold;
        letter-spacing: 0;
        line-height: 20px;
        color: $input-color;
        box-sizing: border-box;
        cursor: text;
        display: inline-block;
        font-family: inherit;

        &[disabled] {
          font-weight: $font-weight-default;
          color: $disabled-color;
          background-color: $input-disabled-bg;
          pointer-events: none;
        }
      }
    }

    .input__prefix {
      display: flex;
      align-items: center;
      flex: 0 1 auto;
      margin-inline-start: 4px;

      &.hasContent {
        margin-inline-start: 8px;
      }
    }
  }

  .inner__suffix {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    margin-inline-end: 8px;
  }

  &:hover,
  &:focus {
    border: 1px $input-hover-color solid;
    z-index: 2;
  }

  &.has-focus {
    outline: none;
    background: $input-bg;
    border: 1px solid transparent;
    box-shadow: 0 0 0 2px $input-focus-color;
    z-index: 2;
  }

  &.disabled {
    font-weight: $font-weight-default;
    color: $disabled-color;
    border: 1px solid $color-smoke-50;
    background-color: $input-disabled-bg;
    border-style: solid;
    cursor: not-allowed;
  }

  // Clear button
  .clear-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 16px;
    width: 16px;

    &:hover,
    &:focus {
      cursor: pointer;
      pointer-events: initial;
    }

    .clear-img {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 12px;
      height: 12px;
    }
  }

  //Help Block
  & + .help-block {
    font-family: $label-font;
    font-size: 12px;
    line-height: 20px;
    margin-block-start: 4px;
    margin-block-end: 0;
    color: var(--fw-hint-color, $help-color);
    position: inherit;
    display: block;
    padding-inline-start: 2px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

::placeholder {
  color: $placeholder-color;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: $placeholder-color;
}

::-moz-placeholder {
  color: $placeholder-color;
}

:-ms-input-placeholder {
  color: $placeholder-color;
}

:-moz-placeholder {
  color: $placeholder-color;
}
