@layer components {
    .tabs {
        display: flex;
        flex-wrap: wrap;
        padding-left: 0;
        margin-bottom: 0;
        list-style: none;
    }

    .tabs__link {
        display: block;
        padding: 0.5rem 1rem;
    }

    .tabs__link:hover,
    .tabs__link:focus {
        text-decoration: none;
    }

    .tabs__link.disabled {
        color: #6c757d;
        pointer-events: none;
        cursor: default;
    }

    .tabs--line {
        border-bottom: 1px solid #dee2e6;
    }

    .tabs--line .tabs__link {
        margin-bottom: -1px;
        background-color: transparent;
        border: 1px solid transparent;
        border-top-left-radius: 0.25rem;
        border-top-right-radius: 0.25rem;
    }

    .tabs--line .tabs__link:hover,
    .tabs--line .tabs__link:focus {
        isolation: isolate;
        border-color: #e9ecef #e9ecef #dee2e6;
    }

    .tabs--line .tabs__link.disabled {
        color: #6c757d;
        background-color: transparent;
        border-color: transparent;
    }

    .tabs--line .tabs__link.active {
        color: #495057;
        background-color: #fff;
        border-color: #dee2e6 #dee2e6 #fff;
    }

    .tabs__panels > .tabs__panel {
        display: none;
    }

    .tabs__panels > .active {
        display: block;
    }

    .tabs--line {
        border-bottom: 0.25rem solid var(--theme-color-main);
    }

    .tabs--line .tabs__link {
        background: #fff;
        font-weight: 400;
        border: none;
        margin-bottom: 0;
    }

    .tabs--line .tabs__link.active {
        background: var(--theme-color-main);
        color: #fff;
    }

    /* Nothing switches the panels without js/tabs.js, so show them all; the links then jump to them. */
    @media (scripting: none) {
        .tabs__panels > .tabs__panel {
            display: block;
        }
    }
}