@import "../../themes/anywhere.globals.scss";
@import "../input-number/input-number.scss";

:host {
  /**
    * CSS variables for input field components (e.g., input text, spinner, input mask).
    * @prop --inputPadding: The padding of the input field.
    * @prop --inputBgColor: The background color of the input field.
    * @prop --inputBorder: The border of the input field.
    * @prop --inputTextColor: The text color of the input field, using the --textColor variable.
    * @prop --inputHoverBorderColor: The border color of the input field on hover, using the --primaryColor variable.
    * @prop --inputFocusBorderColor: The border color of the input field on focus, using the --primaryColor variable.
    * @prop --inputErrorBorder: The border of the input field in case of an error.
    * @prop --inputPlaceholderTextColor: The text color of the input field placeholder.
    * @prop --inputTransition: The transition effect for the input field, involving border color and box shadow, using the --transitionDuration variable.
    * @prop --inputFilledBg: The background color of the input field when filled.
    * @prop --inputFilledFocusBg: The background color of the input field when filled and focused.
    * @prop --inputFilledHoverBg: The background color of the input field when filled and hovered.
    * @prop --inputIconColor: The color of icons within the input field, using the --textColor variable.
    * @prop --inputErrorBorderColor: The border color of the input field in case of an error, using the --errorColor variable.
    */

  display: block;

  .any-inputtext {
    font-size: var(--fontSize);
    color: var(--textColor);
    background: var(--inputBgColor);
    padding: var(--inputPadding);
    border: var(--inputBorder);
    -moz-transition: var(--inputTransition);
    -o-transition: var(--inputTransition);
    -webkit-transition: var(--inputTransition);
    transition: var(--inputTransition);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    margin: 0;
    outline: medium none;

    &::placeholder {
      color: var(--inputPlaceholderTextColor);
    }

    &:not([disabled]) {
      &:hover {
        border-color: var(--inputHoverBorderColor);
      }

      &:focus {
        outline: 0 none;
        outline-offset: 0;
        -webkit-box-shadow: var(--focusShadow);
        -moz-box-shadow: var(--focusShadow);
        box-shadow: var(--focusShadow);
        border-color: var(--focusOutlineColor);
      }
    }
  }

  /* Floating Label */
  .any-float-label {
    display: flex !important;
    position: relative;

    label {
      position: absolute;
      pointer-events: none;
      top: 50%;
      margin-top: -0.5rem;
      transition-property: all;
      transition-timing-function: ease;
      line-height: 1;
    }

    textarea ~ label {
      top: 1rem;
    }

    input:focus ~ label,
    input.any-filled ~ label,
    textarea:focus ~ label,
    textarea.any-filled ~ label,
    .any-inputwrapper-focus ~ label,
    .any-inputwrapper-filled ~ label {
      top: -0.75rem;
      font-size: 12px;
    }

    .input:-webkit-autofill ~ label {
      top: -20px;
      font-size: 12px;
    }

    > label {
      left: 0.75rem;
      color: var(--inputPlaceholderTextColor);
      transition-duration: var(--transitionDuration);
    }
  }

  .any-input-icon-left,
  .any-input-icon-right {
    position: relative;
    display: inline-block;
  }

  .any-input-icon-left > i,
  .any-input-icon-right > i {
    position: absolute;
    top: 50%;
    margin-top: -0.5rem;
  }

  .any-fluid .any-input-icon-left,
  .any-fluid .any-input-icon-right {
    display: block;
    width: 100%;
  }

  .any-input-icon-left > span .any-inputtext {
    padding-left: 2rem;
  }

  .any-input-icon-right > span .any-inputtext {
    padding-right: 2rem;
  }

  .any-input-icon-left > i:first-of-type {
    left: 0.5rem;
  }

  .any-input-icon-right > i:last-of-type {
    right: 0.5rem;
  }
}
