/*
 * Input Fields Styles
 * This file styles select, textarea, and textfield components.
 */

.input-main-wrapper {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--Input-Fields-Vertical-Gap, 4px);
  position: relative;

  .input-info-tooltip .icon,
  .textarea-info-tooltip .icon {
    position: static;
    transform: none;
    font-size: var(--Icon-M, 24px);
  }

  /*
   * --- Input Container ---
   * Contains label, input/select/textarea, icons, and helper text.
   */
  .input-container {
    /*
     * Space reserved on the right of the value/label: horizontal padding,
     * plus icon size + horizontal gap when a trailing icon is present
     * (see the :has(.icon.icon-*) rules below).
     */
    --input-trailing-space: var(--Input-Fields-Horizontal-Padding-Icon, 20px);

    position: relative;
    width: 100%;

    /*
     * Generic Input Styles
     */
    .input {
      width: 100%;
      height: var(--Input-Fields-Text-Field-Height, 48px);
      padding-block: var(--Input-Fields-Vertical-Padding, 16px);
      padding-left: var(--Input-Fields-Horizontal-Padding, 24px);
      padding-right: var(--input-trailing-space);
      border-radius: var(--Input-Fields-Radius-Default, 9999px);
      border: var(--Input-Fields-Border-Default, 1px) solid
      var(--Input-Fields-Placeholder-Border);
      background-color: var(--Input-Fields-Enabled-Background);
      color: var(--Input-Fields-Placeholder-Text-Value);
      font: var(--Body-Base);
      text-overflow: ellipsis;

      &::placeholder {
        color: var(--Input-Fields-Placeholder-Text-Value);
      }

      /* Time fields show only the value: hide the native clock indicator */
      &[type="time"]::-webkit-calendar-picker-indicator {
        display: none;
      }

      &:disabled {
        background-color: var(--Input-Fields-Disabled-Background);
        border-color: var(--Input-Fields-Disabled-Border);
        color: var(--Input-Fields-Disabled-Text-Value);
        cursor: not-allowed;
      }

      &.placeholder-error:enabled {
        background-color: var(--Input-Fields-Placeholder-Background);
        border-color: var(--Input-Fields-Error-Border);
        color: var(--Input-Fields-Placeholder-Text-Value);
      }

      &:enabled {
        color: var(--Input-Fields-Enabled-Text-Value);
        border-color: var(--Input-Fields-Enabled-Border);
        background-color: var(--Input-Fields-Enabled-Background);

        &:hover {
          border-color: var(--Input-Fields-Hover-Border);
          background-color: var(--Input-Fields-Hover-Background);
          color: var(--Input-Fields-Hover-Text-Value);
        }

        &:focus {
          outline: var(--Input-Fields-Border-Focused) solid
          var(--Input-Fields-Focused-Border-Focused);
          outline-offset: 2px;
          background-color: var(--Input-Fields-Focused-Background);
          color: var(--Input-Fields-Focused-Text-Value);
        }

        &:active {
          border-color: var(--Input-Fields-Pressed-Border);
          background-color: var(--Input-Fields-Pressed-Background);
          color: var(--Input-Fields-Pressed-Text-Value);
        }
      }
    }

    /*
     * --- Floating Label Styles ---
     */
    label {
      color: var(--Input-Fields-Placeholder-Text-Value);
      padding: var(--Input-Fields-Label-Padding, 4px) 0;
      position: absolute;
      left: var(--Input-Fields-Horizontal-Padding, 24px);
      top: 50%;
      transform: translateY(-50%);
      max-width: calc(
        100% - var(--Input-Fields-Horizontal-Padding, 24px) -
        var(--input-trailing-space)
      );
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      pointer-events: none;
      transition: all 0.2s ease-in-out;
      font: var(--Body-Base);
    }

    /*
     * --- Select Styles ---
     */
    .input.select:enabled {
      cursor: pointer;
    }

    /*
     * --- Icon Styles ---
     */
    .icon {
      position: absolute;
      top: 50%;
      right: var(--Input-Fields-Horizontal-Padding-Icon, 20px);
      transform: translateY(-50%);
    }

    &:has(.select) > .icon {
      pointer-events: none;
    }

    /*
     * --- Select Value Styles ---
     * The visible value for custom select dropdowns.
     * Placeholder (no selection) uses Placeholder-Text-Value;
     * with a selection (has-value) it follows Enabled / interaction tokens.
     *
     * Opacity for has-placeholder-text uses :where() (specificity of
     * .select-value only) and must precede the base .select-value rule
     * (no-descending-specificity).
     */
    :where(&.has-placeholder-text:not(.has-value)) > .select-value {
      opacity: 0;
    }

    :where(&.has-placeholder-text:not(.has-value).is-open) > .select-value,
    :where(&.has-placeholder-text:not(.has-value):has(.input:focus)) > .select-value {
      opacity: 1;
    }

    .select-value {
      color: var(--Input-Fields-Placeholder-Text-Value);
      position: absolute;
      left: var(--Input-Fields-Horizontal-Padding, 24px);
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      padding-right: var(--input-trailing-space);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      cursor: pointer;
    }

    /*
     * Hide Edge/IE native password reveal when a custom toggle is present.
     */
    &.has-password-toggle {
      .input[type="password"]::-ms-reveal {
        display: none;
      }

      .icon {
        cursor: pointer;
      }
    }

    &.has-value {
      .select-value {
        color: var(--Input-Fields-Enabled-Text-Value);
      }

      label {
        top: 0;
        font-size: var(--Size-S12);
        padding: var(--Label-Input-Fields-Vertical-Padding, 0) var(--Input-Fields-Label-Padding, 4px);
        background-color: var(--Label-Input-Fields-Secondary-Background);
        border-radius: var(--Label-Input-Fields-Radius, 4px);
        color: var(--Label-Input-Fields-Secondary-Text);
      }
    }

    &:has(.input:disabled) .select-value {
      color: var(--Input-Fields-Disabled-Text-Value);
      cursor: not-allowed;
    }

    &.is-open > .icon,
    .icon.is-open {
      transform: translateY(-50%) rotate(180deg);
    }

    /*
     * --- Textarea Styles ---
     */
    .textarea {
      border-radius: var(--Input-Fields-Radius-Text-Area);
      resize: none;
      height: 100%;
      padding-left: var(
        --Input-Fields-Horizontal-Padding-Text-Area,
        var(--Input-Fields-Horizontal-Padding, 24px)
      );

      & + label {
        top: var(--Input-Fields-Vertical-Padding, 16px);
        padding-block: var(--Label-Input-Fields-Vertical-Padding, 0);
        transform: translateY(0);
      }

      &:not(:placeholder-shown),
      &:focus {
        & + label {
          transform: translateY(-50%);
        }
      }

      & ~ .icon {
        top: var(--Input-Fields-Vertical-Padding, 16px);
        transform: translateY(0);
      }
    }

    .textarea:placeholder-shown:not(:focus) {
      color: var(--Input-Fields-Placeholder-Text-Value);
    }

    /*
     * Trailing icon: value/label stop before the icon
     * (padding-icon + icon size + horizontal gap).
     * :where() keeps specificity equal to the base .input-container rule
     * (no-descending-specificity); source order makes these win.
     */
    &:where(:has(.icon.icon-small)) {
      --input-trailing-space: calc(
        var(--Input-Fields-Horizontal-Padding-Icon, 20px) +
        var(--Icon-Xs, 16px) + var(--Input-Fields-Horizontal-Gap, 8px)
      );
    }

    &:where(:has(.icon.icon-medium)) {
      --input-trailing-space: calc(
        var(--Input-Fields-Horizontal-Padding-Icon, 20px) +
        var(--Icon-S, 20px) + var(--Input-Fields-Horizontal-Gap, 8px)
      );
    }

    &:where(:has(.icon.icon-large)) {
      --input-trailing-space: calc(
        var(--Input-Fields-Horizontal-Padding-Icon, 20px) +
        var(--Icon-M, 24px) + var(--Input-Fields-Horizontal-Gap, 8px)
      );
    }

    &:where(:has(.icon.icon-extra-large)) {
      --input-trailing-space: calc(
        var(--Input-Fields-Horizontal-Padding-Icon, 20px) +
        var(--Icon-L, 32px) + var(--Input-Fields-Horizontal-Gap, 8px)
      );
    }

    .input:not(:placeholder-shown),
    .input:focus {
      & + label {
        top: 0;
        font: var(--Body-Extra-Small);
        padding: var(--Label-Input-Fields-Vertical-Padding, 0)
        var(--Input-Fields-Label-Padding, 4px);
        background-color: var(--Label-Input-Fields-Secondary-Background);
        border-radius: var(--Label-Input-Fields-Radius, 4px);
        color: var(--Label-Input-Fields-Secondary-Text);
      }
    }

    &:has(.textarea) {
      height: var(--Input-Fields-Text-Area-Height, 120px);
    }

    &:has(.select-value:hover) {
      .input:enabled {
        border-color: var(--Input-Fields-Hover-Border);
        background-color: var(--Input-Fields-Hover-Background);
        color: var(--Input-Fields-Hover-Text-Value);
      }
    }
  }

  /*
   * --- Helper Text Styles ---
   */
  .helper-container {
    display: flex;
    flex-direction: column;
    padding-left: var(--Input-Fields-Horizontal-Padding, 24px);
    gap: var(--Input-Fields-Vertical-Gap, 4px);
    align-self: stretch;
    font: var(--Body-Extra-Small);
    min-height: 1lh;

    & .checkbox-field-label,
    & .checkbox,
    & a {
      font: var(--Body-Extra-Small);
    }

    .helper-hint-row,
    .helper-message-row {
      display: flex;
      align-items: flex-start;
      gap: var(--Input-Field-Hint-Horizontal-Gap-Icon, 4px);
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.2s ease, opacity 0.15s ease;

      &.is-visible {
        max-height: 4em;
        opacity: 1;
      }

      /* Multi-line hint/message: the icon stays aligned to the first text line. */
      > .icon {
        flex-shrink: 0;
        padding-top: var(--Input-Field-Hint-Top-Icon-Gap, 1px);
      }
    }

    .helper-hint-row {
      color: var(--Input-Field-Hint-Helper-Text);
    }

    .message-text .validation-error-link {
      color: inherit;
      font: inherit;
      text-decoration: underline;
    }
  }

  /*
   * Text inputs (class on .input-main-wrapper or .input-container):
   * hide native placeholder until focus so the label stays visible at rest.
   */
  &.has-placeholder-text .input-container,
  .input-container.has-placeholder-text {
    .input:placeholder-shown:not(:focus)::placeholder {
      color: transparent;
    }
  }

  .input-info-tooltip,
  .textarea-info-tooltip {
    align-items: center;
    background: var(--Icon-Button-Primary-Default-Background, transparent);
    border: 0;
    border-radius: var(--Button-Radius-Default, 24px);
    cursor: pointer;
    display: inline-flex;
    height: var(--P32, 32px);
    justify-content: center;
    padding: 0;
    position: absolute;
    right: calc(-1 * var(--P40, 40px));
    top: var(--Input-Fields-Vertical-Padding, 16px);
    width: var(--P32, 32px);
  }

  /*
   * When an info tooltip is configured, keep the icon button in the layout
   * flow beside the field instead of absolutely offset outside the wrapper
   * (which gets clipped by main { overflow: hidden }).
   */
  &.has-info-tooltip {
    flex-flow: row wrap;
    align-items: flex-start;
    column-gap: 0;

    > .input-container,
    > .phone-number-fields,
    > .date-picker-single,
    > .date-picker-range {
      flex: 1 1 0;
      min-width: 0;
    }

    > .helper-container {
      flex: 1 1 100%;
    }

    .input-info-tooltip,
    .textarea-info-tooltip {
      position: static;
      flex: 0 0 auto;
      align-self: center;
    }

    /* Dropdown as wide as the field only, excluding the info icon button */
    > .options-list {
      width: calc(100% - var(--P32, 32px));
    }
  }

  .pwd-input-requirements {
    display: flex;
    padding-left: var(--Input-Fields-Horizontal-Padding, 24px);
    align-items: center;
    align-content: center;
    gap: var(--P08, 8px) var(--P16, 16px);
    align-self: stretch;
    flex-wrap: wrap;

    & .requirement {
      display: flex;
      align-items: center;
      gap: var(--P04, 4px);

      & .icon {
        font-size: var(--Icon-Xs);
        color: var(--Icon-Error-Pronounced, #ce1821);
      }

      & p {
        color: var(--Input-Field-Hint-Helper-Text-Icon, #63727d);
        font: var(--Body-Extra-Small);
      }

      &.satisfied {
        & .icon {
          color: var(--Icon-Success-Pronounced, #1e8e3e);
        }
      }

      &.informative {
        flex-basis: 100%;

        & .icon {
          color: var(--Input-Field-Hint-Helper-Text-Icon, #63727d);
        }

        & p {
          font: var(--Body-Extra-Small-Strong);
        }
      }
    }
  }

  /*
   * --- Validation States ---
   * Styles for success, and error states.
   */

  /*
   * Generic validation-state helper text — low specificity base.
   * Covers compound fields (e.g. phone-number) where .error/.success
   * is toggled on an element that is NOT .input-container.
   */
  &:has(.error) > .helper-container .helper-message-row {
    color: var(--Input-Field-Hint-Error-Text);
  }

  &:has(.success) > .helper-container .helper-message-row {
    color: var(--Input-Field-Hint-Success-Text);
  }

  &:has(.warning) > .helper-container .helper-message-row {
    color: var(--Input-Field-Hint-Warning-Text);
  }

  /* handle success state */
  .input-container:has(.success) {
    .input.success:enabled {
      border-color: var(--Input-Fields-Success-Border);
      background-color: var(--Input-Fields-Success-Background);
      color: var(--Input-Fields-Success-Text-Value);
    }

    &.has-value .select-value {
      color: var(--Input-Fields-Success-Text-Value);
    }

    + .helper-container .helper-message-row {
      color: var(--Input-Field-Hint-Success-Text);
    }
  }

  /* handle warning state */
  .input-container:has(.warning) {
    .input.warning:enabled {
      border-color: var(--Input-Fields-Warning-Border);
      background-color: var(--Input-Fields-Warning-Background);
      color: var(--Input-Fields-Warning-Text-Value);
    }

    &.has-value .select-value {
      color: var(--Input-Fields-Warning-Text-Value);
    }

    + .helper-container .helper-message-row {
      color: var(--Input-Field-Hint-Warning-Text);
    }
  }

  /* handle error state */
  .input-container:has(.error) {
    .input.error:enabled {
      border-color: var(--Input-Fields-Error-Border);
      background-color: var(--Input-Fields-Error-Background);
      color: var(--Input-Fields-Error-Text-Value);
    }

    &.has-value .select-value {
      color: var(--Input-Fields-Error-Text-Value);
    }

    + .helper-container .helper-message-row {
      color: var(--Input-Field-Hint-Error-Text);
    }
  }

  /*
   * Select / photo-select: keep label at rest; show .select-value placeholder
   * only on open / focus while empty.
   */
  .input-container.has-placeholder-text:not(.has-value).is-open label,
  .input-container.has-placeholder-text:not(.has-value):has(.input:focus) label {
    top: 0;
    font: var(--Body-Extra-Small);
    padding: var(--Label-Input-Fields-Vertical-Padding, 0)
      var(--Input-Fields-Label-Padding, 4px);
    background-color: var(--Label-Input-Fields-Secondary-Background);
    border-radius: var(--Label-Input-Fields-Radius, 4px);
    color: var(--Label-Input-Fields-Secondary-Text);
  }

  .input-container.has-value:has(.input:enabled:hover, .select-value:hover)
  .select-value {
    color: var(--Input-Fields-Hover-Text-Value);
  }

  .input-container.has-value:has(.input:enabled:focus) .select-value {
    color: var(--Input-Fields-Focused-Text-Value);
  }

  .input-container.has-value:has(.input:enabled:active) .select-value {
    color: var(--Input-Fields-Pressed-Text-Value);
  }

  .input-container.has-password-toggle .icon:focus-visible {
    outline: var(--Input-Fields-Border-Focused) solid
    var(--Input-Fields-Focused-Border-Focused);
    outline-offset: 2px;
    border-radius: 2px;
  }

  /*
   * The confirmed state intentionally overrides the base/interaction rules above,
   * so it comes last in the cascade.
   */
  /* stylelint-disable no-descending-specificity */

  /*
   * --- Confirmed / editable state (opt-in) ---
   * Read-only grey field with a round pencil button on the right and a
   * success hint with green check below (e.g. email / phone verified via OTP).
   * Applied by setConfirmed() when the `editable` option is set.
   */
  &.is-confirmed {
    gap: var(--Quote-Tool-Input-Field-Editable-Field-Vertical-Gap, 4px);

    .input-container {
      --input-trailing-space: calc(
        var(--Quote-Tool-Input-Field-Editable-Field-Padding-Right, 16px) +
        var(--P32, 32px) +
        var(--Quote-Tool-Input-Field-Editable-Field-Horizontal-Gap, 16px)
      );

      .input:enabled,
      .input:enabled:is(:hover, :focus, :active) {
        padding-left: var(--Quote-Tool-Input-Field-Editable-Field-Padding-Left, 24px);
        border-color: transparent;
        border-radius: var(--Quote-Tool-Input-Field-Radius, 9999px);
        background-color: var(--Quote-Tool-Input-Field-Editable-Field-Background);
        color: var(--Input-Fields-Enabled-Text-Value);
        cursor: default;
      }

      .input:enabled:focus {
        outline: var(--Input-Fields-Border-Focused) solid
        var(--Input-Fields-Focused-Border-Focused);
        outline-offset: 2px;
      }

      label {
        left: var(--Quote-Tool-Input-Field-Editable-Field-Padding-Left, 24px);
      }
    }

    .helper-container .helper-message-row {
      color: var(--Input-Field-Hint-Success-Text);

      .icon {
        color: var(--Input-Field-Hint-Success-Text-Icon);
      }
    }
  }

  .editable-edit-button {
    position: absolute;
    top: 50%;
    right: var(--Quote-Tool-Input-Field-Editable-Field-Padding-Right, 16px);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--P32, 32px);
    height: var(--P32, 32px);
    padding: 0;
    border: 0;
    border-radius: var(--Button-Radius-Default, 24px);
    background: var(--Quote-Tool-Input-Field-Editable-Field-Edit-Button-Background);
    color: var(--Quote-Tool-Input-Field-Editable-Field-Edit-Button-Icon);
    cursor: pointer;

    &[hidden] {
      display: none;
    }

    &:focus-visible {
      outline: var(--Input-Fields-Border-Focused) solid
      var(--Input-Fields-Focused-Border-Focused);
      outline-offset: 2px;
    }

    .editable-edit-icon {
      font-size: var(--Icon-Xs, 16px);
    }
  }

  /* stylelint-enable no-descending-specificity */
}