@use '@cfpb/cfpb-design-system/src/utilities/icon' as *;
@use '@cfpb/cfpb-design-system/src/abstracts/mixins-text-input' as *;
@use '@cfpb/cfpb-design-system/src/utilities/index' as *;

:host {
  // Theme
  --input-border-default: var(--gray-60); // $input-border
  --input-border-disabled: var(--gray-60);
  --input-border-success: var(--green);
  --input-border-warning: var(--gold);
  --input-border-error: var(--red);

  // Private vars
  --input-border: var(--input-border-default);

  display: flex;
}

:host([borderless]) {
  .o-search-input {
    border-color: transparent;

    input {
      padding-top: rem-from-px(5px);
      padding-bottom: rem-from-px(5px);
    }

    &:hover,
    &:focus-within {
      border-color: transparent;
      box-shadow: 0 0 0 1px transparent;
      outline-color: transparent;
    }
  }
}

:host([disabled]) {
  --input-border: var(--input-border-disabled);

  .o-search-input {
    label,
    input[type='search'] {
      color: var(--input-border);
    }

    &:hover {
      border: 1px solid var(--input-border);
      box-shadow: none;

      label,
      input[type='search'] {
        cursor: not-allowed;
      }

      button[type='reset'] {
        display: none;
      }
    }

    // Validation state coloring.
    &--error:hover,
    &--warning:hover,
    &--success:hover {
      outline-color: var(--input-border);
    }
  }
}

.o-search-input {
  position: relative;
  display: flex;
  width: initial;
  flex: 0 1 100%;
  align-items: center;

  // Add a min-width for the default width of the text input + clear button,
  // so that when the clear button appears it doesn't bump the input width.
  min-width: 300px;

  background: var(--white);

  // Create a faux input border that includes the input and clear button.
  border: 1px solid var(--input-border);
  outline: 0 solid var(--input-border);

  label {
    position: absolute;
    left: 10px;
    cursor: pointer;
  }

  input {
    // We need to override the user agent stylesheet for form controls (button, input, select, textarea).
    font: inherit;

    // This line-height settings is taken from base.scss.
    line-height: unitless-from-px(19px);
  }

  input[type='search'] {
    @include u-text-input-base;
    font-size: 1rem;
    width: 100%;
    white-space: nowrap;
    padding-left: 30px;
    cursor: text;

    // Remove default rounding in Safari.
    appearance: none;

    // Remove input border and re-create it around the input and clear X.
    border: none;
    box-shadow: none;
    outline: none;
  }

  // Style the clear x button, and hide it by default.
  button[type='reset'] {
    display: none;
    align-self: center;

    color: var(--gray-40);
    font-size: 20px;
    border: 1px solid transparent;
    background-color: transparent;
    outline: 0;

    // Set the touch target minimum for iOS.
    width: 44px;

    > cfpb-icon {
      // Set width of SVG width to create a box for the focus rectangle.
      width: 25px;

      // Prevent targeting of button's internal SVG icon.
      pointer-events: none;
    }
  }

  button[type='reset']:hover {
    color: var(--black);
    cursor: pointer;
  }

  // Style the clear x focus rectangle.
  button[type='reset']:focus {
    color: var(--black);

    // Put the focus rectangle on the icon
    // because the button touch target is larger and would be lop-sided if
    // we put the rectangle on the button.
    > cfpb-icon {
      outline: 1px dotted var(--pacific);
    }
  }

  // However, hide it if we haven't entered any text yet.
  input[type='search']:placeholder-shown ~ button[type='reset'] {
    display: none;
  }

  // Remove the default x mark in Chrome.
  input[type='search']::-webkit-search-decoration,
  input[type='search']::-webkit-search-cancel-button,
  input[type='search']::-webkit-search-results-button,
  input[type='search']::-webkit-search-results-decoration {
    display: none;
  }

  &:hover,
  &:focus-within {
    border: 1px solid var(--pacific);
    box-shadow: 0 0 0 1px var(--pacific);
    outline-color: var(--pacific);
    input[type='search'] {
      outline: none;

      // Remove the right-hand padding, because the clear button is showing.
      padding-right: 0;
    }
  }

  &:focus-within {
    outline: 1px dotted var(--pacific);
    outline-offset: 2px;
  }

  // Validation state coloring.
  &--error,
  &--warning,
  &--success {
    outline-width: 1px;
  }

  &--error {
    --input-border: var(--input-border-error);
  }

  &--warning {
    --input-border: var(--input-border-warning);
  }

  &--success {
    --input-border: var(--input-border-success);
  }

  // Show the clear x button if we're focused within the search input area.
  &:focus-within button[type='reset'],
  &:hover button[type='reset'] {
    display: flex;
    justify-content: flex-end;
  }
}

// If the value is on a search input by the backend, then the reset button
// will only reset the input back to initial value at page load. We add a
// small amount of JS to fully clear the input for this circumstance.
// However, this doesn't work when JS is disabled,
// so in that case we hide the reset button.
.no-js .o-search-input button[type='reset'] {
  display: none !important;
}

::placeholder {
  color: var(--input-text-placeholder-default);
}