/* todo mobile first (dropdown) */

.tabs {
    border-bottom: 1px solid lightgray;
    padding-left: 0;

    > li,
    > label {
        display: inline-block;
        margin-right: 1.5rem;
        padding: 0 1rem 0 0
    }

    label {
        border-bottom: 1px solid lightgray
    }

    a {
        display: inline-block;
        padding: 0.75rem 0
    }

    [data-pane], input[type="radio"] {
        display: none       /* TODO fix this hides radio buttons in forms in tab panes as well */
    }

    /* TODO add :target to select initial tab based on anchor? */
    [data-tab="tab1"]:checked ~ [data-pane="tab1"],
    [data-tab="tab2"]:checked ~ [data-pane="tab2"],
    [data-tab="tab3"]:checked ~ [data-pane="tab3"],
    [data-tab="tab4"]:checked ~ [data-pane="tab4"],
    [data-tab="tab5"]:checked ~ [data-pane="tab5"],
    [data-tab="tab6"]:checked ~ [data-pane="tab6"],
    [data-tab="tab7"]:checked ~ [data-pane="tab7"] {
        display: block
    }

    :target,
    :target + label,
    :checked + label {
        border-bottom: 4px solid $secondary-color
    }
}