.os-tab-group {
    menu[role="tablist"] {
        position: relative;
        margin: 0 0 -2px 0;
        text-indent: 0;
        list-style-type: none;
        display: flex;
        padding-left: 3px;

        .os-button {
            border-top-left-radius: 3px;
            border-top-right-radius: 3px;
            border: 0px;
            border-bottom: 2px solid transparent;
            z-index: 1;
            display: flex;
            color: #222;
            text-decoration: none;
            min-width: unset;
            top: 3px;
            padding: 3px 12px;
            background: rgb(var(--os-background-color));
            box-shadow: inset 1px 1px rgb(255, 255, 255), inset 2px 2px rgba(255, 255, 255, .5), inset -1px 0 rgb(0, 0, 0), inset -2px 0 rgba(0, 0, 0, .5);

            &:first-of-type::before {
                content: "";
                display: block;
                position: absolute;
                z-index: -1;
                top: 100%;
                left: 0;
                height: 2px;
                width: 0;
                border-left: 1px solid rgb(255, 255, 255);
                border-right: 1px solid rgb(246, 246, 246);
            }

            &[aria-selected="true"] {
                padding-bottom: 2px;
                margin-top: -2px;
                background-color: rgb(var(--os-background-color));
                position: relative;
                z-index: 8;
                margin-right: -1px;
                margin-top: -4px;
                margin-left: -3px;
                margin-bottom: 1px;
                top: 2px;
    
                &:first-of-type {
                    left: 0;
                }
            }

            &:focus {
                outline: 1px dotted rgba(0, 0, 0, .9);
                outline-offset: -4px;
            }
        }
    }

    [role="tabpanel"] {
        padding: 14px;
        clear: both;
        background: rgb(var(--os-background-color));
        position: relative;
        z-index: 2;
        margin-bottom: 9px;
        box-shadow: inset 1px 1px rgb(255, 255, 255), inset 2px 2px rgba(255, 255, 255, .5), inset -1px -1px rgb(0, 0, 0), inset -2px -2px rgba(0, 0, 0, .5);
    }
}
