/* Trigger */

/* Overlay */

:is(ui-search .search-trigger):has( + .search-content[data-state="open"])::before {
        content: "";
        inset: 0;
        cursor: auto;
        z-index: 9998;
        position: fixed;
        background-color: var(--color-overlay);
      }

/* Content */

ui-search .search-content {
    z-index: 9999;
    position: fixed;
    translate: -50% -50%;
    left: 50%;
    inset-block-start: 20%;
    width: 500px;
    height: 56px;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-background);
    padding: var(--spacing-12) var(--spacing-16);
    display: flex;
    align-items: center;
    gap: var(--spacing-12);
    transition: var(--transition-expressive-default-spatial);
  }

:is(ui-search .search-content) form {
      flex: 2;
    }

:is(:is(ui-search .search-content) form) input {
        width: 100%;
        border: none;
        outline: none;
        font: var(--font-body-lg);
        color: var(--color-on-background);
        background-color: transparent;
      }

:is(:is(:is(ui-search .search-content) form) input)::placeholder {
          color: color-mix(in srgb, currentColor 50%, transparent);
        }

:is(ui-search .search-content) button[aria-label="close"] {
      border: none;
      outline: none;
      cursor: pointer;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: transparent;
      color: var(--color-on-surface-variant);
      margin-inline-end: calc(var(--spacing-6) * -1);
    }

:is(:is(ui-search .search-content) button[aria-label="close"]) > [ui-icon] {
        overflow: visible;
      }

[data-state="closed"]:is(ui-search .search-content) {
      width: 0px;
      opacity: 0;
      visibility: hidden;
    }

:is(ui-search .search-content):has(input:placeholder-shown) button[aria-label="close"] {
        visibility: hidden;
      }

/* Responsive */
@media (max-width: 769px) {
    ui-search .search-content {
      width: calc(100% - var(--spacing-24));
    }
}