/* SchoolCMS – Buttons
   Burlington House School, from components/buttons 10001:1576 and
   components/download-button 78:530 (Figma heKkCZqetGZ4Jss8DyuX3n).

   A button is bare markup – <a class="button" href>Label</a> – and the two
   pseudo-elements draw the rest: ::after is the disc, ::before the glyph.
   The label sets the ink (currentColor), so the colourway classes only
   ever change `color`; the hover fills the disc purple and whitens the
   glyph inside it. Also the wysiwyg Formats "Button" style (inc/wysiwyg.php
   adds this same class to a link). An <input type="submit"> cannot carry
   pseudo-elements – forms render a <button>, as WPForms does.

   Loaded on the front end and via add_editor_style(): the selector list
   root keeps every rule at (0,1,1), above wp-admin's own .button. */

.button,
a.button,
button.button,
input.button {
    position:           relative;
    display:            inline-flex;
    align-items:        center;
    /* label → disc; the arrow's tail runs the last 28px of it */
    gap:                41px;
    /* the glyph is positioned off the button's right edge, so the box
       must hug its content – never stretch in a flex column or grid */
    width:              fit-content;
    max-width:          100%;
    min-height:         47px;
    margin:             0;
    padding:            0;
    background:         none;
    border:             0;
    border-radius:      0;
    font:               var(--text-12kx);
    letter-spacing:     2.2px;
    text-transform:     uppercase;
    text-decoration:    none;
    text-align:         left;
    /* THE LABEL WRAPS RATHER THAN OVERFLOW. The box is capped at its
       container (max-width) and the glyph is pinned to the box's right
       edge, so a label held to one line in a narrower column ran out past
       the box with the disc beyond it, and the arrow was left behind over
       the label – "Download Our Prospectus" in a POI card on a tablet
       (Charlie, 2026-10-21), the home downloads at 1024. fit-content still
       keeps every label that fits on one line; the 47px min-height takes
       two lines without growing. */
    white-space:        normal;
    color:              var(--color-plum);
    cursor:             pointer;
    -webkit-appearance: none;
    appearance:         none;

    @media (min-width: 992px) {
        letter-spacing: 2.4px;
    }

    /* the disc – 47px, 1px stroke in the ink, white 40 % over a 4px blur */
    &::after {
        content:                 '';
        flex:                    none;
        width:                   47px;
        height:                  47px;
        border:                  1px solid currentColor;
        border-radius:           50%;
        background:              var(--color-white-40);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter:         blur(4px);
        transition:              background-color var(--transition-base), border-color var(--transition-base);
    }

    /* the arrow – one glyph that crosses the disc's edge: 28px of tail
       outside it (painted by the gradient layer, always the ink), the rest
       of the line and the head inside (the background-color, white on
       hover), so the tail keeps its colour when the disc fills. The
       backdrop-filter makes the disc a stacking context painted in tree
       order, i.e. over this earlier pseudo – z-index lifts the glyph back
       above it */
    &::before {
        content:          '';
        position:         absolute;
        z-index:          1;
        top:              50%;
        right:            18px;
        width:            57px;
        height:           16px;
        translate:        0 -50%;
        background:       linear-gradient(currentColor, currentColor) 0 0 / 28px 100% no-repeat;
        background-color: currentColor;
        -webkit-mask:     url(../../images/icons/arrow.svg) center / 100% auto no-repeat;
        mask:             url(../../images/icons/arrow.svg) center / 100% auto no-repeat;
        transition:       background-color var(--transition-base);
    }

    &:hover,
    &:focus-visible {
        text-decoration: none;

        &::after {
            background:   var(--color-purple);
            border-color: var(--color-plum);
        }

        &::before {
            background-color: var(--color-white);
        }
    }

    &:focus-visible {
        outline:        2px solid currentColor;
        outline-offset: 4px;
    }

    /* Color=White – on plum bands, photo scrims and frosted cards */
    &.white {
        color: var(--color-white);
    }

    /* download-button 78:530 – "Download" + a 50px plum-10 disc holding the
       tray glyph; hover fills the disc plum. .white for the frosted cards. */
    &.download {
        gap:        10px;
        min-height: 50px;

        &::after {
            width:                   50px;
            height:                  50px;
            border:                  0;
            background:              var(--color-plum-10);
            -webkit-backdrop-filter: none;
            backdrop-filter:         none;
        }

        &::before {
            right:        16.5px;
            width:        17px;
            height:       15px;
            background:   currentColor;
            -webkit-mask: url(../../images/icons/download-tray.svg) center / contain no-repeat;
            mask:         url(../../images/icons/download-tray.svg) center / contain no-repeat;
        }

        &:hover,
        &:focus-visible {
            &::after {
                background: var(--color-plum);
            }

            &::before {
                background: var(--color-white);
            }
        }
    }

    &:disabled,
    &[aria-disabled="true"] {
        opacity:        0.5;
        pointer-events: none;
        cursor:         default;
    }

    /* the author display would otherwise beat the UA [hidden] rule */
    &[hidden] {
        display: none;
    }
}

/* Circular plus control (curriculum and staff tiles) – the markup carries a
   literal "+" for accessibility and copy-paste, but the drawn glyph is the
   two pseudo-element bars: a font glyph rides its line box's baseline,
   which left the plus optically off the disc's centre and made every
   rotation sweep around it. The bars are geometrically centred, so all
   states and animations share one axis. */
.button-plus,
a.button-plus,
button.button-plus {
    position:        relative;
    display:         inline-flex;
    width:           52px;
    height:          52px;
    flex-shrink:     0;
    /* rests PURPLE and fills plum on hover (components/plus Default vs
       Variant2) – the tiles that carry it set that hover. It rested on
       plum, the same colour those hovers apply, so no disc on the site
       changed on hover at all. */
    background:      var(--color-purple);
    color:           var(--color-white);
    /* the text node is screen-reader/clipboard content only */
    font-size:       0;
    border:          none;
    border-radius:   50%;
    text-decoration: none;
    cursor:          pointer;
    transition:      background var(--transition-base), transform var(--transition-base);

    &::before,
    &::after {
        content:    '';
        position:   absolute;
        top:        50%;
        left:       50%;
        width:      40%;
        height:     1px;
        background: currentColor;
        transform:  translate(-50%, -50%);
    }

    &::after {
        transform: translate(-50%, -50%) rotate(90deg);
    }
}