/**
 * Copyright IBM Corp. 2021, 2025
 * SPDX-License-Identifier: MPL-2.0
 */

//
// FORM > TEXT-INPUT
//

// "BASE" CONTROL

.hds-form-text-input {
  width: 100%;
  max-width: 100%;
  padding: var(--token-form-control-padding);
  color: var(--token-form-control-base-foreground-value-color);
  background-color: var(--token-form-control-base-surface-color-default);
  border: var(--token-form-control-border-width) solid var(--token-form-control-base-border-color-default);
  border-radius: var(--token-form-control-border-radius);
  box-shadow: var(--token-elevation-inset-box-shadow);

  // PLACEHOLDER

  ::placeholder {
    color: var(--token-form-control-base-foreground-placeholder-color);
  }

  // STATUS

  &:hover,
  &.mock-hover {
    border-color: var(--token-form-control-base-border-color-hover);
  }

  // focus (same for all the states)

  &:focus,
  &.mock-focus {
    border-color: var(--token-color-focus-action-internal);
    outline: 3px solid var(--token-color-focus-action-external);
    outline-offset: 0;
  }

  // READONLY

  &:read-only {
    color: var(--token-form-control-readonly-foreground-color);
    background-color: var(--token-form-control-readonly-surface-color);
    border-color: var(--token-form-control-readonly-border-color);
    box-shadow: none;
  }

  // DISABLED

  &:disabled {
    color: var(--token-form-control-disabled-foreground-color);
    background-color: var(--token-form-control-disabled-surface-color);
    border-color: var(--token-form-control-disabled-border-color);
    box-shadow: none;
    cursor: not-allowed;
  }

  // INVALID

  &.hds-form-text-input--is-invalid {
    border-color: var(--token-form-control-invalid-border-color-default);

    &:hover,
    &.mock-hover {
      border-color: var(--token-form-control-invalid-border-color-hover);
    }

    &:focus,
    &.mock-focus {
      border-color: var(--token-color-focus-critical-internal);
      outline-color: var(--token-color-focus-critical-external);
    }
  }
}

// "TYPE" CUSTOMIZATION

.hds-form-text-input__wrapper {
  position: relative;
  width: 100%;
}

// PASSWORD

.hds-form-text-input--has-visibility-toggle {
  padding-right: calc(var(--token-form-control-padding) + 24px);
}

.hds-form-text-input__visibility-toggle {
  position: absolute;
  top: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
  right: calc(var(--token-form-control-padding) - var(--token-form-control-border-width));
}

.hds-form-text-input {
  // DATE/TIME

  &[type="date"],
  &[type="time"],
  &[type="datetime-local"],
  &[type="month"],
  &[type="week"] {
    // browsers set a specific width for these controls, we want to keep it
    width: initial;

    // show the native icon dimmed if disabled (hidden in Chrome)
    &:disabled::-webkit-calendar-picker-indicator {
      visibility: visible;
      opacity: 0.5;
    }

    // show the icon if readonly
    // notice: don't change the "[readonly]" selector to ":readonly" because it's needed to overwrite the specificity in Chrome
    &[readonly]::-webkit-calendar-picker-indicator {
      visibility: visible;
    }
  }

  // we override the default icon with the Flight corresponding one
  // notice: the original in Chrome has two assets, one for light and one for dark mode, and uses a special syntax, but apparently it doesn't work if used in a stylesheet
  &[type="date"],
  &[type="datetime-local"],
  &[type="month"],
  &[type="week"] {
    &::-webkit-calendar-picker-indicator {
      background-image: var(--token-form-text-input-background-image-data-url-date);
      background-position: center center;
      background-size: var(--token-form-text-input-background-image-size);
    }
  }

  &[type="time"] {
    &::-webkit-calendar-picker-indicator {
      background-image: var(--token-form-text-input-background-image-data-url-time);
      background-position: center center;
      background-size: var(--token-form-text-input-background-image-size);
    }
  }

  // SEARCH
  &[type="search"] {
    padding-left: calc(var(--token-form-control-padding) + 24px); // extra space for the icon
    background-image: var(--token-form-text-input-background-image-data-url-search);
    background-repeat: no-repeat;
    background-position: var(--token-form-text-input-background-image-position-x) 50%;
    background-size: var(--token-form-text-input-background-image-size);

    &::-webkit-search-cancel-button {
      width: var(--token-form-text-input-background-image-size);
      height: var(--token-form-text-input-background-image-size);
      background-image: var(--token-form-text-input-background-image-data-url-search-cancel);
      background-position: center center;
      background-size: var(--token-form-text-input-background-image-size);
      // stylelint-disable-next-line property-no-vendor-prefix
      -webkit-appearance: none;
    }

    // IS LOADING
    &.hds-form-text-input--is-loading {
      background-image: var(--token-form-text-input-background-image-data-url-search-loading);
    }
  }
}