@layer components {

    .pills {
        display: flex;
        gap: var(--s-2);
        overflow-x: auto;
        scrollbar-width: none;
    }

    .pills::-webkit-scrollbar {
        display: none;
    }

    .pills__link {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
        padding-inline: var(--s-4);
        border: 1px solid var(--c-line-strong);
        border-radius: var(--r-pill);
        font-size: var(--t-sm);
        white-space: nowrap;
        transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
    }

    .pills__link:hover {
        border-color: var(--c-ink);
    }

    .pills__link[aria-current="page"] {
        border-color: var(--c-ink);
        background: var(--c-ink);
        color: var(--c-page);
    }

}