.tab-list__tabs {
    display: flex;
    gap: 1.5rem;
}

.tab-list__panels {
    position: relative;
}


/**
 * This element is using CSS from the following:
 *
 * - opengemeenten_site/General/OpenGemeentenSite-Section.css
 *
 * Variables can be set there globally or override them here!
 */
.tab-list__tab {
    --color-background: var(--root-color--darken-less);
    --color-border: transparent;
}

.tab-list__tab:focus,
.tab-list__tab:hover {
    --color-border: var(--root-color--primary);
}

.tab-list__tab[aria-selected="true"] {
    --color-background: var(--root-color--white);
    --color-border: var(--root-color--primary);
}

.tab-list__tab {
    flex: 1;
    border-top-style: solid;
    border-width: 0.25rem 0 0 0;
    padding: 1rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease-in-out;
}

.tab-list__tab[aria-selected="true"] {
    box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16);
}

.tab-list__tab {
    background-color: var(--color-background, white);
    border-top-color: var(--color-border, transparent);
}

.tab-list__panel {
    --color-background: var(--root-color--white);
}

.tab-list__panel {
    box-shadow: 0 1rem 1rem 0 rgba(0, 0, 0, 0.16);
}

.tab-list__panel {
    background-color: var(--color-background, white);
}