search.css

.ds-search {
  --dsc-search-padding-inline-x: var(--ds-spacing-2);
  --dsc-search-padding-inline-y: var(--ds-spacing-3);
  --dsc-search-clear-button-size: var(--ds-sizing-6);
  --dsc-search-input-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M10.5 3.25a7.25 7.25 0 1 0 4.57 12.88l5.41 5.41a.75.75 0 1 0 1.06-1.06l-5.41-5.41A7.25 7.25 0 0 0 10.5 3.25M4.75 10.5a5.75 5.75 0 1 1 11.5 0 5.75 5.75 0 0 1-11.5 0'/%3E%3C/svg%3E");
  --dsc-search-clear-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'/%3E%3C/svg%3E");
  --dsc-search-icon-size: var(--ds-sizing-7);
  --dsc-search-clear-icon-size: var(--ds-sizing-9);

  display: grid;
  grid-template-columns: 1fr auto;
  width: 100%;
  border-radius: var(--ds-border-radius-default);
  position: relative;

  /* Moves the focused element to the top, so it is not hidden by an adjacent element */
  &:focus-visible {
    z-index: 1;
  }

  & input {
    padding-inline: var(--dsc-search-padding-inline-x) var(--dsc-search-padding-inline-y);
  }

  /* The simple variant, when no submit button is present */
  &:not(:has(button[type='submit'])) {
    & input {
      padding-left: 2.4em;
    }

    &::before {
      content: '';
      position: absolute;
      margin-inline: var(--dsc-search-padding-inline-x) var(--dsc-search-padding-inline-y);
      top: 50%;
      transform: translateY(-50%);
      height: var(--dsc-search-icon-size);
      aspect-ratio: 1 / 1;
      mask: var(--dsc-search-input-icon) center / contain no-repeat;
      background: currentcolor;
      z-index: 2;
    }
  }

  & input {
    grid-area: 1 / 1;

    &::-webkit-search-decoration,
    &::-webkit-search-cancel-button {
      appearance: none;
    }
  }

  /* We hide the clear button when input is empty */
  &:has(input:placeholder-shown) button[type='reset'],
  &:has(input:is(:read-only, :disabled, [aria-disabled='true'])) button[type='reset'] {
    display: none;
  }

  &:has(button[type='reset']) {
    & input {
      padding-inline-end: calc(var(--dsc-search-clear-button-size) + var(--dsc-search-padding-inline-x) * 2);
    }
  }

  & button[type='reset'] {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: center;
    margin-inline-end: calc(var(--dsc-search-padding-inline-x) * 2);
    height: var(--dsc-search-clear-button-size);
    width: var(--dsc-search-clear-button-size);
    font-size: 0.5em;
    z-index: 2;
    position: relative;

    &::before {
      content: '';
      height: var(--dsc-search-clear-icon-size);
      width: var(--dsc-search-clear-icon-size);
      mask: var(--dsc-search-clear-icon) center / contain no-repeat;
      background: currentcolor;
      z-index: 2;
      pointer-events: none;
    }
  }

  & button[type='submit'] {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    &:not(:focus-visible) {
      border-left: 0;
    }
  }

  &:has(button[type='submit']) {
    & input {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}