pico/scss/forms/_input-search.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "forms/input-search") {
  /**
   * Input type search
   */

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

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

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

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

      &::-webkit-search-cancel-button {
        -webkit-appearance: none;
        appearance: none;
        height: 40px;
        width: 40px;
        margin-left: 8px;
        stroke-width: 1px;
        stroke-linecap: round;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='red'><path d='M202.829 197.172a4 4 0 1 1-5.658 5.656L128 133.658l-69.171 69.17a4 4 0 0 1-5.658-5.656L122.343 128 53.171 58.828a4 4 0 0 1 5.658-5.656L128 122.342l69.171-69.17a4 4 0 0 1 5.658 5.656L133.657 128Z'/></svg>");
        cursor: pointer;
      }
    }
  }

  [dir="rtl"] {
    #{$parent-selector} :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;
          }
        }
      }
    }
  }
}