pico/scss/forms/_input-search.scss

@use "../settings";

/**
 * Input type search
 */

// :not() are needed to add Specificity and avoid !important on padding
input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
  &[type="search"] {
    padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
    border-radius: 5rem;
    background-image: var(--icon-search);
    background-position: center left 1.125rem;
    background-size: 1rem auto;
    background-repeat: no-repeat;

    &[aria-invalid] {
      @if settings.$enable-important {
        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem) !important;
      } @else {
        padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
      }
      background-position: center left 1.125rem, center right 0.75rem;
    }

    &[aria-invalid="false"] {
      background-image: var(--icon-search), var(--icon-valid);
    }

    &[aria-invalid="true"] {
      background-image: var(--icon-search), var(--icon-invalid);
    }
  }
}

// Cancel button
[type="search"] {
  &::-webkit-search-cancel-button {
    -webkit-appearance: none;
    display: none;
  }
}

[dir="rtl"] {
  :where(input) {
    &:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]) {
      &[type="search"] {
        background-position: center right 1.125rem;

        &[aria-invalid] {
          background-position: center right 1.125rem, center left 0.75rem;
        }
      }
    }
  }
}