tabs{
    /* margin: 40px auto;
    position: relative; */
    display: block;
}

/* tabs tab{
} */

tabs tab>input[type="radio"] {
    display: none;
}
tabs tab>label:first {
    margin-left: 10px;
}

tabs tab>label {
    display: block;
    padding: 0 10px;

    cursor: pointer;
    position: relative;
    background: var(--pico-secondary);
    border-top-left-radius: var(--pico-border-radius);
    border-top-right-radius: var(--pico-border-radius);

    border-top: var(--pico-primary-border) solid var(--pico-border-width);
    border-left: var(--pico-primary-border) solid var(--pico-border-width);
    border-right: var(--pico-primary-border) solid var(--pico-border-width);
    color: var(--pico-primary-inverse);
}

tabs tab>label:hover {
    background: var(--pico-primary-hover);
    color: var(--pico-primary-inverse);
}

tabs .content {
    z-index: 0;
    overflow: auto;
    position: absolute;

    opacity:0;
    transition: opacity 400ms ease-out;
    border-top: 1px solid #ccc;
}

tabs>tab>[role="tab"]:checked + label {
    top: 0;
    background: var(--pico-primary-background);
    border-top: var(--pico-primary-border) solid var(--pico-border-width);
    border-left: var(--pico-primary-border) solid var(--pico-border-width);
    border-right: var(--pico-primary-border) solid var(--pico-border-width);
}

tabs>tab>[role="tab"]:checked ~ .content {
    z-index: 1;

    opacity: 1;
    transition: opacity 400ms ease-out;
}