/* A restrained colour sweep. Isolated stacking keeps the surface behind text,
   including buttons with unwrapped text, without changing their dimensions. */
body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button) {
    --button-rest: var(--ink);
    --button-sweep: #683650;
    --button-text: var(--white);
    --button-border: var(--ink);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--button-rest);
    color: var(--button-text);
    transition: border-color 180ms ease;
}

body :is(.button-link--light, .city-finder .button-link, .club-invite .button-link) {
    --button-rest: var(--white);
    --button-border: var(--white);
    --button-sweep: #e9dfd5;
    --button-text: var(--ink);
}

body :is(.button-link--outline, .editorial-collection .button-link) {
    --button-rest: transparent;
    --button-sweep: #e9dfd5;
    --button-text: var(--ink);
}

body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    border-radius: inherit;
    background: var(--button-sweep);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 360ms cubic-bezier(.22, .61, .36, 1);
}

/* Preserve legibility throughout the sweep instead of swapping text colours. */
body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button):is(:hover, :focus-visible) {
    background: var(--button-rest);
    color: var(--button-text);
    border-color: var(--button-border);
}

@media (hover: hover) and (pointer: fine) {
    body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button):hover:not(:disabled):not([aria-disabled="true"])::before {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button):focus-visible::before {
    transform: scaleX(1);
    transform-origin: left center;
}

@media (prefers-reduced-motion: reduce) {
    body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button),
    body :is(.button-link, .hero-search button, .finder-submit, .nav-search-menu form button)::before {
        transition: none;
    }
}