@layer modules {

    /* Search form
  /* ------------------------------------------------------------------------ */

    .search__form {
        --input-border-color: var(--color-ink-light);

        display: flex;
        grid-area: breadcrumb;
        margin-inline: auto;
        max-inline-size: 55ch;
        position: relative;
        inline-size: 100%;
    }

    .search__input {
        inline-size: 100%;
        padding-inline-end: 3em;
    }

    .search__clear {
        --btn-border-size: 0;

        inset-block-start: 50%;
        inset-inline-end: 0.5em;
        position: absolute;
        transform: translateY(-50%);
    }

    /* Results container
  /* ------------------------------------------------------------------------ */

    .search__results {
        margin-inline: auto;
        max-inline-size: 55ch;
        padding-block: var(--block-space);
        padding-inline: var(--main-padding);
    }

    /* Result groups
  /* ------------------------------------------------------------------------ */

    .search__group {
        margin-block-end: calc(var(--block-space) * 1.5);
    }

    .search__group-title {
        border-block-end: 1px solid var(--color-ink-lighter);
        color: var(--color-ink-dark);
        font-family: var(--font-data);
        font-size: var(--text-xx-small);
        font-weight: 600;
        letter-spacing: 0.06em;
        margin: 0;
        padding-block-end: 0.5ch;
        text-transform: uppercase;
    }

    .search__list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    /* Individual result
  /* ------------------------------------------------------------------------ */

    .search__result {
        border-block-end: 1px solid oklch(var(--lch-ink-lighter) / 0.5);
        color: inherit;
        display: block;
        padding: 0.6em 0.5em;
        margin-inline: -0.5em;
        text-decoration: none;
        border-radius: var(--data-radius);
        transition: background-color 80ms ease-out;

        @media (any-hover: hover) {
            &:hover {
                background: var(--color-ink-lightest);
            }
        }

        &:last-child {
            border-block-end: none;
        }
    }

    .search__title {
        font-size: var(--text-small);
        font-weight: 600;
        letter-spacing: -0.01em;
        margin: 0;
    }

    .search__excerpt {
        color: var(--color-ink-dark);
        font-size: var(--text-small);
        line-height: 1.5;
        margin-block-start: 0.2em;
    }

    .search__excerpt--comment {
        display: flex;
        gap: 0.5em;
        align-items: baseline;
    }

    .search__author {
        color: var(--color-ink-darker);
        font-weight: 600;
        white-space: nowrap;
    }

    .search__meta {
        color: var(--color-ink-medium);
        font-family: var(--font-data);
        font-size: var(--text-xx-small);
        letter-spacing: 0.02em;
        margin-block-start: 0.2em;
        text-transform: uppercase;
    }

    .search__empty {
        color: var(--color-ink-medium);
        padding-block: calc(var(--block-space) * 3);
        text-align: center;
    }

    /* Highlight marks -- uses the existing --color-highlight (yellow-lighter)
  /* ------------------------------------------------------------------------ */

    .search__result mark {
        background: var(--color-highlight);
        border-radius: 0.15em;
        box-decoration-break: clone;
        color: inherit;
        padding-inline: 0.1em;
    }
}