:root {

    /* tab strip */
    --Product-Database-Tab-Strip-pdb-tabStrip-tabActive-g000: light-dark(#FFEDBF, #553366);
    --Product-Database-Tab-Strip-pdb-tabStrip-tabActive-g100: light-dark(#FFFEFB, #111225);
    --Product-Database-Tab-Strip-pdb-tabStrip-tabActive-solid: light-dark(var(--color-awkward-aqua-700), var(--color-awkward-aqua-300));
    --Product-Database-Tab-Strip-pdb-tabStrip-tabActive-content: light-dark(var(--color-nextpit-nyx), var(--color-nextpit-eos));
    --Product-Database-Tab-Strip-pdb-tabStrip-tabInactive-content: light-dark(var(--color-awkward-aqua-600), var(--color-awkward-aqua-900));
    --Product-Database-Tab-Strip-pdb-tabStrip-background-g000: light-dark(rgba(217, 226, 255, 0), rgba(0, 10, 38, 0));
    --Product-Database-Tab-Strip-pdb-tabStrip-background-g100: light-dark(rgba(217, 226, 255, 0.5), rgba(0, 10, 38, 1));
    --Product-Database-Tab-Strip-pdb-tabStrip-background-solid: light-dark(var(--page-background-highlight), var(--page-background-shade));
    --Product-Database-Tab-Strip-pdb-tabStrip-background-solid-alt: light-dark(var(--page-background), var(--color-nextpit-nyx-50));
}

.td-page-title {
    position: relative;
    z-index: 1;
    color: var(--General-Text-hl-main);
    font: var(--font-article-page-h2);
    margin-bottom: 1.5rem;
    @media (min-width: 768px) {
        margin-bottom: 2.44rem;
    }
}

.db-nav-wrapper {
    display: flex;
    justify-content: center;
    margin-bottom: 2.12rem;
    position: relative;
    z-index: 1;
    @media (min-width: 768px)   {
        margin-bottom: 4.06rem;
    }
}

.db-nav {
    width: 100%;
    max-width: 56.125rem;
    height: 2.1875rem;
    display: flex;
    border-radius: 1.09375rem;
    padding: 0.1875rem;
    background-color: light-dark(var(--Product-Database-Tab-Strip-pdb-tabStrip-background-solid), var(--color-nextpit-nyx-50));
    @media (min-width: 768px) {
        height: 3.125rem;
        border-radius: 1.5625rem;
    }
    li {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1;
        padding: 0.3125rem;
        border-radius: 0.3125rem;
        a, span, h2 {
            color: var(--Product-Database-Tab-Strip-pdb-tabStrip-tabInactive-content);
            font: var(--font-button-label);
            text-align: center;
            width: 100%;
        }
        & > span[onclick] {
            cursor: pointer;
        }
        h2 {
            user-select: none;
        }
        &.active {
            background: var(--Product-Database-Tab-Strip-pdb-tabStrip-tabActive-solid);
            a, span {
                color: var(--Product-Database-Tab-Strip-pdb-tabStrip-tabActive-content)
            }
        }
        &:first-child {
            border-top-left-radius: 1.09375rem;
            border-bottom-left-radius: 1.09375rem;
            @media (min-width: 768px) {
                border-top-left-radius: 1.5625rem;
                border-bottom-left-radius: 1.5625rem;
            }
        }
        &:last-child {
            border-top-right-radius: 1.09375rem;
            border-bottom-right-radius: 1.09375rem;
            @media (min-width: 768px) {
                border-top-right-radius: 1.5625rem;
                border-bottom-right-radius: 1.5625rem;
            }
        }
    }
}