/* ==========================================================================
   #UPDOOTS
   ========================================================================== */

/**
 * Every design-token reference has a hard-coded final fallback: this
 * stylesheet may end up on a Kirby site that doesn't share this project's
 * custom-property names (--space-*, --color-gray-shade-*, etc.) — an
 * undefined custom property makes the whole declaration invalid at
 * computed-value time, which would silently drop padding/border/colour
 * instead of falling back to anything.
 *
 * The tokens themselves are read once into a small set of `--updoot-*`
 * properties on the root class, which is also the supported override
 * surface: a consuming site can restyle the whole component with
 * `.c-updoot { --updoot-border-color: ...; }` instead of fighting
 * selector specificity, or set `alienlebarge.updoots.css` to `false` in
 * config to skip this stylesheet entirely and style `.c-updoot`/`.updoot`
 * from scratch.
 */
.c-updoot {
    --updoot-gap: var(--space-3xs, 0.25rem);
    --updoot-padding-block: var(--space-3xs, 0.25rem);
    --updoot-padding-inline: var(--space-2xs, 0.5rem);
    --updoot-border-width: var(--border-width-thin, 1px);
    --updoot-border-color: var(--color-gray-shade-6, #1a1a1a);
    --updoot-background: var(--color-gray-shade-1, #f5f5f5);
    --updoot-background-hover: var(--color-gray-shade-2, #e5e5e5);
    --updoot-focus-color: var(--color-focus, #1a1a1a);
    --updoot-font-family: var(
        --font-family-monospace,
        ui-monospace,
        SFMono-Regular,
        Menlo,
        Consolas,
        'Liberation Mono',
        monospace
    );
    --updoot-count-font-size: var(--step--1, 0.875rem);

    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: var(--updoot-gap);

    /* WCAG 2.5.8 Target Size (Minimum), AA — regardless of how small
       --updoot-padding-* ends up resolving on a given site. */
    min-width: 1.5rem;
    min-height: 1.5rem;
    padding-block: var(--updoot-padding-block);
    padding-inline: var(--updoot-padding-inline);
    border: var(--updoot-border-width) solid var(--updoot-border-color);
    border-radius: 999px;
    font-family: var(--updoot-font-family);
    background-color: var(--updoot-background);
    cursor: pointer;
}

.c-updoot:hover {
    background-color: var(--updoot-background-hover);
}

.c-updoot:active {
    transform: scale(0.95);
}

/* WCAG 2.4.7 Focus Visible / 1.4.11 Non-text Contrast, AA. Matches the
   outline this site already uses on summary:focus-visible; the fallback
   keeps a visible ring on a site without a --color-focus token. */
.c-updoot:focus-visible {
    outline: var(--updoot-focus-color) solid var(--border-width-thickest, 2px);
    outline-offset: var(--updoot-padding-block);
}

/* Set by updoot.js on (updoots: emoji once: true) buttons after a vote */
.c-updoot--disabled {
    opacity: 70%;
    cursor: not-allowed;
}

.c-updoot--disabled:hover {
    background-color: var(--updoot-background);
}

.c-updoot--disabled:active {
    transform: none;
}

.c-updoot__emoji {
    line-height: 1;
}

.c-updoot__count {
    font-size: var(--updoot-count-font-size);
    opacity: 0%;
    transition: opacity 0.18s ease;
    font-variant-numeric: tabular-nums;
}

.c-updoot--ready .c-updoot__count {
    opacity: 100%;
}

.c-updoot--pop {
    animation: updoot-pop 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

@supports (rotate: random(-3deg, 3deg)) {
    .c-updoot--pop {
        --updoot-pop-rotation: random(-3deg, 3deg);
    }
}

@keyframes updoot-pop {
    0% {
        transform: scale(1);
        rotate: 0deg;
    }

    35% {
        transform: scale(1.15);
        rotate: var(--updoot-pop-rotation, 3deg);
    }

    100% {
        transform: scale(1);
        rotate: 0deg;
    }
}

@media (prefers-reduced-motion: reduce) {
    .c-updoot,
    .c-updoot__count {
        transition: none;
    }

    .c-updoot--pop {
        animation: none;
    }
}