.tabs {
    --tabs-base-color: #DDD;

    position: relative;
    margin: 10px 0 0 5px;

    li {
        float: left;
        display: block;
    }

    input[type="radio"] {
        display: none;
    }

    label {
        display: block;
        padding: 10px 10px 15px 10px;
        border-radius: 4px 4px 0 0;
        font-size: larger;
        background: var(--tabs-base-color);
        cursor: pointer;
        position: relative;
        top: 10px;
        transition: all 0.2s ease-in-out;
        filter: brightness(1.1);

        &:hover {
            filter: brightness(0.9);
        }
    }

    .tab-content {
        z-index: 2;
        display: none;
        overflow: hidden;
        width: fit-content;
        padding: 10px;
        position: absolute;
        left: 0;
        background-color: var(--tabs-base-color);
        filter: none;
    }

    [id^="tab"]:checked + label {
        top: 0;
        filter: none;
    }

    [id^="tab"]:checked ~ [id^="tab-content"] {
        display: block;
    }
}