.tab-content, .tab {
    all: unset;

    >li {
        all: unset;
    }
}

.tab {
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--scale) * 5px);

    & > * {
        all: unset;

        > a {
            display: block;
            text-align: center;
            color: var(--color-f);

            background-color: #6f6f6f;
            border-image-source: url("../img/button.png");
            border-image-slice: 6 6 6 6 fill;
            border-image-width: auto;
            font-size: calc(var(--scale) * 8px);
            padding: calc(var(--scale) * 2px) calc(var(--scale) * 8px);
            text-shadow: color-mix(in srgb, currentColor 25%, black) var(--pixel) var(--pixel) 0;
            font-family: 'Minecraft', sans-serif;

            &:focus-visible, &:hover {
                background-color: #7e88bf;
                color: var(--color-e);
                border-image-source: url("../img/button_highlighted.png");
            }
        }
    }

    > .active > a {
        background-color: #2c2c2c;
        border-image-source: url("../img/button_disabled.png");
        border-image-slice: 2 fill;
        color: var(--color-7);
    }

    a {
        text-decoration: none;
    }
}


.tab-content > li:not(.active) {
    display: none;
}