/*-------------------------------------------*\
    Tabs
\*-------------------------------------------*/

menu[role="tablist"] {
    button {
        top: 3px;
        background: var(--surface);
        box-shadow: inset 1px 1px #fff, inset 2px 2px #dfdfdf, inset -1px 0 black, inset -2px 0 #7f7f7f;
        border-top-right-radius: 3px;
        border-top-left-radius: 3px;
        border-bottom: 2px solid transparent;
        &:first-of-type::before {
            content: "";
            display: block;
            position: absolute;
            z-index: -1;
            top: 100%;
            left: 0;
            height: 2px;
            width: 0;
            border-left: 1px solid #fff;
            border-right: 1px solid #dfdfdf;
        }
        &[aria-selected="true"] {
            top: 2px;
            margin-right: -1px;
            margin-top: -4px;
            &:first-of-type {
                left: 0;
            }
        }
        padding: 3px 12px;
    }
}

[role="tabpanel"] {
    box-shadow: inset 1px 1px white, inset 2px 2px #dfdfdf, inset -1px -1px #0a0a0a, inset -2px -2px gray;
}
