/*
 * NES.css button groups and tabs.
 *
 * NES.css ships `.nes-btn` but has nothing for joined buttons or tabbed
 * navigation, so both are rebuilt here from the same pieces a button uses:
 * the 5x5 SVG `border-image` that draws the pixelated frame, and an `::after`
 * inset box-shadow for the drop shade.
 *
 * The frame is painted in the 2px band just outside the border box
 * (`border-image-outset: 2`), so neighbouring items overlap by 2px to share a
 * single seam instead of stacking two frames on top of each other.
 */

.nes-btn-group,
.nes-tabs {
    --nes-frame: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(33,37,41)" /></svg>');
    --nes-cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAzElEQVRYR+2X0Q6AIAhF5f8/2jYXZkwEjNSVvVUjDpcrGgT7FUkI2D9xRfQETwNIiWO85wfINfQUEyxBG2ArsLwC0jioGt5zFcwF4OYDPi/mBYKm4t0U8ATgRm3ThFoAqkhNgWkA0jJLvaOVSs7j3qMnSgXWBMiWPXe94QqMBMBc1VZIvaTu5u5pQewq0EqNZvIEMCmxAawK0DNkay9QmfFNAJUXfgGgUkLaE7j/h8fnASkxHTz0DGIBMCnBeeM7AArpUd3mz2x3C7wADglA8BcWMZhZAAAAAElFTkSuQmCC) 14 0, pointer;
    --nes-shade: #adafbc;
    --nes-bg: #fff;
    --nes-bg-hover: #e7e7e7;
    --nes-fg: #212529;
    --nes-active-bg: #209cee;
    --nes-active-shade: #006bb3;
    --nes-active-fg: #fff;
}

/* --- Button group --------------------------------------------------------
 * A row (or column, with `.is-vertical`) of `.nes-btn` welded together.
 * Interior buttons drop the shade on the side they share with their
 * neighbour so the group reads as one control.
 */

.nes-btn-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    margin: 4px;
}

.nes-btn-group > .nes-btn {
    margin: 0;
}

.nes-btn-group > .nes-btn + .nes-btn {
    margin-left: -2px;
}

.nes-btn-group > .nes-btn:not(:last-child)::after {
    box-shadow: inset 0 -4px var(--nes-shade);
}

.nes-btn-group > .nes-btn:not(:last-child):hover::after {
    box-shadow: inset 0 -6px var(--nes-shade);
}

.nes-btn-group > .nes-btn:not(:last-child):active:not(.is-disabled)::after {
    box-shadow: inset 4px 4px var(--nes-shade);
}

.nes-btn-group.is-vertical {
    flex-direction: column;
}

.nes-btn-group.is-vertical > .nes-btn + .nes-btn {
    margin-top: -2px;
    margin-left: 0;
}

.nes-btn-group.is-vertical > .nes-btn:not(:last-child)::after {
    box-shadow: inset -4px 0 var(--nes-shade);
}

.nes-btn-group.is-vertical > .nes-btn:not(:last-child):hover::after {
    box-shadow: inset -6px 0 var(--nes-shade);
}

/* The shade colour a button uses depends on its variant. */
.nes-btn-group > .nes-btn.is-primary {
    --nes-shade: #006bb3;
}

.nes-btn-group > .nes-btn.is-success {
    --nes-shade: #4aa52e;
}

.nes-btn-group > .nes-btn.is-warning {
    --nes-shade: #e59400;
}

.nes-btn-group > .nes-btn.is-error {
    --nes-shade: #8c2022;
}

/* A group used as a toggle: the chosen button stays pressed in. */
.nes-btn-group > .nes-btn.is-active {
    z-index: 1;
    color: var(--nes-active-fg);
    background-color: var(--nes-active-bg);
}

.nes-btn-group > .nes-btn.is-active::after,
.nes-btn-group > .nes-btn.is-active:hover::after {
    box-shadow: inset 4px 4px var(--nes-active-shade);
}

/* --- Tabs ----------------------------------------------------------------
 * `.nes-tabs` is the strip, `.nes-tab` each tab. Tabs are bottom-aligned:
 * inactive ones sit 4px lower and keep the raised shade, the selected one
 * reaches full height and is pressed in, which is what marks it as current.
 */

.nes-tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    margin: 2px 4px 12px 2px;
    padding: 0;
    list-style: none;
}

.nes-tab {
    position: relative;
    display: inline-block;
    padding: 6px 8px;
    font: inherit;
    color: var(--nes-fg);
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    background-color: var(--nes-bg);
    border-style: solid;
    border-width: 4px;
    border-image-source: var(--nes-frame);
    border-image-slice: 2;
    border-image-width: 2;
    border-image-repeat: stretch;
    border-image-outset: 2;
    cursor: var(--nes-cursor);
    user-select: none;
}

.nes-tab + .nes-tab {
    margin-left: -2px;
}

.nes-tab::after {
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px;
    content: "";
    box-shadow: inset -4px -4px var(--nes-shade);
}

/* Interior tabs share their right edge with the next tab, so only the last
 * one carries the shade there and the strip reads as one piece. */
.nes-tab:not(:last-child)::after {
    box-shadow: inset 0 -4px var(--nes-shade);
}

.nes-tab:not(.is-active) {
    margin-top: 4px;
}

.nes-tab:hover {
    color: var(--nes-fg);
    text-decoration: none;
    background-color: var(--nes-bg-hover);
}

.nes-tab:focus {
    outline: 0;
    box-shadow: 0 0 0 6px rgba(173, 175, 188, 0.3);
}

.nes-tab.is-active {
    z-index: 1;
    color: var(--nes-active-fg);
    background-color: var(--nes-active-bg);
}

.nes-tab.is-active:hover {
    color: var(--nes-active-fg);
    background-color: var(--nes-active-bg);
}

.nes-tab.is-active::after {
    box-shadow: inset 4px 4px var(--nes-active-shade);
}

.nes-tab.is-disabled,
.nes-tab.is-disabled:hover {
    color: var(--nes-fg);
    cursor: not-allowed;
    background-color: #d3d3d3;
    opacity: 0.6;
}

@media (prefers-color-scheme: dark) {
    .nes-btn-group,
    .nes-tabs {
        --nes-frame: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="UTF-8" ?><svg version="1.1" width="5" height="5" xmlns="http://www.w3.org/2000/svg"><path d="M2 1 h1 v1 h-1 z M1 2 h1 v1 h-1 z M3 2 h1 v1 h-1 z M2 3 h1 v1 h-1 z" fill="rgb(255,255,255)" /></svg>');
        --nes-bg: var(--bulma-body-background-color);
        --nes-bg-hover: #2b2f36;
        --nes-fg: #fafafa;
        --nes-active-bg: var(--bulma-link);
    }
}