/* ========================================
   STRANGE FRONTIERS BUTTONS
   ========================================
   One stylesheet for every button, wherever it's drawn. The Character
   Creator and Player Tools are the reference:

     strange-frontiers-character-creator  src/app/buttons.css (this file)
                                          src/app/components/Button.tsx
     portfolio_site                       css/sf-buttons.css (a copy)
                                          php/rpg/components/buttons.php

   Both copies must stay identical: change it in the creator, then copy it
   to the site.

   A button is .sf-btn plus its options:

     tone   (none) gray · --primary the creator's green · --dark black ·
            --light near-white · --ghost no fill, light text that turns
            green · --danger red · --condition the Conditions' gray ·
            --item the Items' olive
     size   (none) Bebas, 38px tall · --small Bebas, 25px tall, for a
            section's Add · --pill Open Sans, rounded all round, for badges
     shape  --round a circle for an icon, in four sizes: --xs 24px,
            --sm 28px, --md 32px (the default), --lg 36px
     kind   --bare no fill or padding, for an icon or a value to click ·
            --link a text link, like the lore links

   and its states: :hover lightens it (a ghost turns green), :focus-visible
   rings it in green, :disabled or aria-disabled fades it, aria-busy keeps a
   disabled button at full strength while it works, .is-waiting fades a
   button that still works (a next step before its step is done), and
   .is-ready makes it glitch, for something that's waiting on the player.

   Tabs are the site's .rpg-tab and .tech-field-tab (css/rpg.css), which the
   creator wears too. */

.sf-btn {
    --sf-btn-bg: var(--portfolio-gray, #505254);
    --sf-btn-fg: var(--portfolio-white, #fff);
    /* Hover mixes the fill this much of itself with --sf-btn-mix */
    --sf-btn-mix: var(--portfolio-white, #fff);
    --sf-btn-keep: 80%;

    appearance: none;
    display: inline-block;
    margin: 0;
    padding: .6rem 1rem .5rem;
    border: 0;
    border-radius: 4px;
    background-color: var(--sf-btn-bg);
    color: var(--sf-btn-fg);
    font-family: "bebas_neueregular", Impact, "Arial Narrow", sans-serif;
    font-size: 1.25rem;
    letter-spacing: 1px;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 200ms, color 200ms, opacity 200ms;

    &:hover:not(:disabled, [aria-disabled="true"]) {
        background-color: color-mix(in srgb, var(--sf-btn-bg) var(--sf-btn-keep), var(--sf-btn-mix));
        color: var(--sf-btn-fg);
        text-decoration: none;
    }

    &:focus-visible {
        outline: 2px solid var(--frontiers-green, #2dfc64);
        outline-offset: 2px;
    }

    &:is(:disabled, [aria-disabled="true"]) {
        opacity: .45;
        cursor: not-allowed;
    }

    /* Working: still disabled, but at full strength (Build it's clock) */
    &[aria-busy="true"] {
        opacity: 1;
        cursor: progress;
    }

    /* Works, but isn't the next thing to do yet */
    &.is-waiting {
        opacity: .45;
    }

    /* A button with an icon (Icon, Sign or a pen) lays it out beside its
       label, centered. Text alone stays inline, so its spaces survive. */
    &:has(> :is(.icon, .sign-icon, .pen-icon)) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .4em;
    }

    /* Its icons, in its text color: an Icon at the type's size, a + or −
       a little smaller */
    .icon {
        flex: none;
        width: 1em;
        height: 1em;
        fill: currentColor;
    }

    .sign-icon {
        flex: none;
        width: .75em;
        height: .75em;
        fill: currentColor;
    }
}

/* ---- Tone ---- */

.sf-btn--primary {
    --sf-btn-bg: var(--frontiers-green, #2dfc64);
    --sf-btn-fg: var(--portfolio-black, #1f2122);
    --sf-btn-keep: 75%;
}

.sf-btn--dark {
    --sf-btn-bg: var(--portfolio-black, #1f2122);
    --sf-btn-keep: 66%;
}

.sf-btn--light {
    --sf-btn-bg: var(--portfolio-near-white, #f9fafb);
    --sf-btn-fg: var(--portfolio-black, #1f2122);
    --sf-btn-mix: var(--portfolio-black, #1f2122);
    --sf-btn-keep: 75%;
}

.sf-btn--danger {
    --sf-btn-bg: var(--portfolio-red, #eb0844);
    --sf-btn-mix: var(--portfolio-black, #1f2122);
}

/* A section's own color: the Conditions' header gray, the Items' olive */
.sf-btn--condition {
    --sf-btn-bg: #b7b4b4;
    --sf-btn-fg: var(--portfolio-black, #1f2122);
    --sf-btn-keep: 75%;
}

.sf-btn--item {
    --sf-btn-bg: #b5ae86;
    --sf-btn-fg: var(--portfolio-black, #1f2122);
    --sf-btn-keep: 75%;
}

/* No fill: light text that turns green under the pointer */
.sf-btn--ghost {
    --sf-btn-bg: transparent;

    &:hover:not(:disabled, [aria-disabled="true"]) {
        background-color: transparent;
        color: var(--frontiers-green, #2dfc64);
    }
}

/* ---- Size ---- */

.sf-btn--small {
    padding: .35rem .75rem;
    font-size: .875rem;
}

.sf-btn--pill {
    padding: .5rem 1rem;
    border-radius: 999px;
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: normal;
    line-height: 1.2;
}

/* ---- Shape: a circle for an icon (+, −, restore, send, close) ---- */

.sf-btn--round {
    --sf-btn-size: 32px;

    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--sf-btn-size);
    height: var(--sf-btn-size);
    padding: 0;
    border-radius: 50%;
    font-family: inherit;
    font-size: 1.25rem;
    font-weight: 600;

    &.sf-btn--xs {
        --sf-btn-size: 24px;
        font-size: 1rem;
    }

    &.sf-btn--sm {
        --sf-btn-size: 28px;
        font-size: 1rem;
    }

    &.sf-btn--md {
        --sf-btn-size: 32px;
    }

    &.sf-btn--lg {
        --sf-btn-size: 36px;
        font-size: 1.15rem;
    }
}

/* ---- Kind ---- */

/* No fill or padding: an icon or a value to click, in the text's color */
.sf-btn--bare {
    --sf-btn-bg: transparent;
    --sf-btn-fg: inherit;

    padding: 0;
    color: inherit;

    &:hover:not(:disabled, [aria-disabled="true"]) {
        background-color: transparent;
        color: inherit;
    }
}

/* A text link, like the lore links: purple, a dotted underline */
.sf-btn--link {
    --sf-btn-bg: transparent;

    display: inline-block;
    padding: 0;
    color: var(--sf-link, var(--frontiers-lore, #884ddc));
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    letter-spacing: 0;
    line-height: inherit;
    text-align: left;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
    white-space: normal;

    &:hover:not(:disabled, [aria-disabled="true"]) {
        background-color: transparent;
        color: var(--sf-link, var(--frontiers-lore, #884ddc));
        text-decoration: underline;
    }
}

/* ---- Ready: waiting on the player ----
   A much smaller take on the site's glitching Strange Frontiers title
   (.frontiers-glitch in css/rpg.css): the same rhythm, but a faint green
   glow, a cyan and red split that widens on the flares, and a slight skew
   instead of the title's slices and lurches. Every frame has the same three
   shadows (green, cyan to the left, red to the right), so they blend from
   one to the next. */
.sf-btn.is-ready:not(:disabled) {
    animation:
        sf-glitch-small-shift 4s ease-in-out infinite alternate,
        sf-glitch-small-glow 8s ease-in-out infinite alternate;
}

@keyframes sf-glitch-small-glow {
    0%, 40%, 50%, 60%, 90%, 95%, 100% {
        filter: drop-shadow(0 0 2px rgb(45 252 100 / 35%)) drop-shadow(-1.5px 0 0 rgb(0 255 255 / 60%)) drop-shadow(1.5px 0 0 rgb(255 0 0 / 60%));
    }
    45%, 75% {
        filter: drop-shadow(0 0 4px rgb(45 252 100 / 70%)) drop-shadow(-3px 0 0 rgb(0 255 255 / 85%)) drop-shadow(3px 0 0 rgb(255 0 0 / 75%));
    }
    97.5% {
        filter: drop-shadow(0 0 2px rgb(45 252 100 / 0%)) drop-shadow(-1.5px 0 0 rgb(0 255 255 / 60%)) drop-shadow(4px 0 0 rgb(255 0 0 / 90%));
    }
}

@keyframes sf-glitch-small-shift {
    0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% {
        transform: none;
    }
    41% { transform: skewX(2deg); }
    42% { transform: skewX(-2deg); }
    59% { transform: skewX(5deg); }
    60% { transform: skewX(-5deg); }
    63% { transform: skewX(2deg); }
    70% { transform: skewX(-6deg); }
    71% { transform: skewX(2deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sf-btn.is-ready:not(:disabled) {
        animation: none;
    }
}