/* Shared document subcategory navigation. */

html .vario-document-category-tab-stack[data-vario-subcategory-tabs-appearance="segmented"],
html[data-vario-theme] .vario-document-category-tab-stack[data-vario-subcategory-tabs-appearance="segmented"] {
    --vario-document-tabs-sub-row-height: var(--vario-size-document-subcategory-row-height) !important;
}

html .vario-document-category-tab-stack[data-vario-subcategory-tabs-appearance="segmented"][data-vario-subcategory-tabs-density="compact"],
html[data-vario-theme] .vario-document-category-tab-stack[data-vario-subcategory-tabs-appearance="segmented"][data-vario-subcategory-tabs-density="compact"] {
    --vario-document-tabs-sub-row-height: var(--vario-size-document-subcategory-compact-row-height) !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"][data-vario-subcategory-tabs-density="compact"],
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"][data-vario-subcategory-tabs-density="compact"] {
    --vario-size-document-subcategory-row-height: var(--vario-size-document-subcategory-compact-row-height);
    --vario-size-document-subcategory-segment-height: var(--vario-size-document-subcategory-compact-segment-height);
    --vario-size-document-subcategory-content-height: var(--vario-size-document-subcategory-compact-content-height);
}

html .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-component-contract="document-subcategory-tabs-v1"][data-vario-subcategory-tabs-appearance="segmented"],
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-component-contract="document-subcategory-tabs-v1"][data-vario-subcategory-tabs-appearance="segmented"] {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--vario-size-document-subcategory-row-height) !important;
    min-height: var(--vario-size-document-subcategory-row-height) !important;
    max-height: var(--vario-size-document-subcategory-row-height) !important;
    padding: 0 10px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vario-component-document-subcategory-segment-border) !important;
    border-radius: 0 !important;
    background: var(--vario-component-document-subcategory-row-bg) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-list,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-list {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    gap: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-list::-webkit-scrollbar,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-list::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab {
    position: relative !important;
    z-index: 0 !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--vario-size-document-subcategory-gap) !important;
    width: auto !important;
    height: var(--vario-size-document-subcategory-segment-height) !important;
    min-height: var(--vario-size-document-subcategory-segment-height) !important;
    margin: 0 -1px 0 0 !important;
    padding: 0 var(--vario-size-document-subcategory-segment-padding-x) !important;
    overflow: visible !important;
    border: 1px solid var(--vario-component-document-subcategory-segment-border) !important;
    border-radius: 0 !important;
    background: var(--vario-component-document-subcategory-segment-bg) !important;
    color: var(--vario-component-document-subcategory-segment-text) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    font-family: var(--vario-font-family-ui) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transform: none !important;
    transition:
        background-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        border-color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        color var(--vario-motion-button-return-duration) var(--vario-motion-button-easing),
        box-shadow var(--vario-motion-button-return-duration) var(--vario-motion-button-easing) !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:first-child,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:first-child {
    border-radius: var(--vario-size-document-subcategory-radius) 0 0 var(--vario-size-document-subcategory-radius) !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:last-child,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:last-child {
    margin-right: 0 !important;
    border-radius: 0 var(--vario-size-document-subcategory-radius) var(--vario-size-document-subcategory-radius) 0 !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:only-child,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:only-child {
    border-radius: var(--vario-size-document-subcategory-radius) !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab::before,
html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab::after,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab::before,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab::after {
    display: none !important;
    content: none !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-icon,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-icon {
    display: grid !important;
    place-items: center !important;
    flex: 0 0 var(--vario-size-document-subcategory-icon-box) !important;
    width: var(--vario-size-document-subcategory-icon-box) !important;
    height: var(--vario-size-document-subcategory-content-height) !important;
    color: inherit !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-icon .nav-icon,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-icon .nav-icon {
    flex: 0 0 var(--vario-size-document-subcategory-icon) !important;
    width: var(--vario-size-document-subcategory-icon) !important;
    height: var(--vario-size-document-subcategory-icon) !important;
    color: currentColor !important;
    stroke-width: 2 !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-label,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab-label {
    display: flex !important;
    align-items: center !important;
    height: var(--vario-size-document-subcategory-content-height) !important;
    white-space: nowrap !important;
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab.active,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab.active {
    z-index: 1 !important;
    border-color: var(--vario-component-document-subcategory-active-bg) !important;
    background: var(--vario-component-document-subcategory-active-bg) !important;
    color: var(--vario-component-document-subcategory-active-text) !important;
}

/* Win against the historical document-register selector without editing it. */
html body .vario-list-standard[data-vario-list-kind="document-register"] .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab,
html[data-vario-theme] body .vario-list-standard[data-vario-list-kind="document-register"] .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab {
    font-size: 11px !important;
    font-weight: 600 !important;
    line-height: 16px !important;
}

html body .vario-list-standard[data-vario-list-kind="document-register"] .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab.active,
html[data-vario-theme] body .vario-list-standard[data-vario-list-kind="document-register"] .vario-document-subcategory-tabs[data-vario-component="VarioDocumentSubcategoryTabs"][data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab.active {
    border-color: var(--vario-component-document-subcategory-active-bg) !important;
    background: var(--vario-component-document-subcategory-active-bg) !important;
    color: var(--vario-component-document-subcategory-active-text) !important;
}

@media (hover: hover) {
    html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:hover:not(.active),
    html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:hover:not(.active) {
        background: var(--vario-component-document-subcategory-segment-hover-bg) !important;
        color: var(--vario-list-accent) !important;
    }

    html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:active,
    html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:active {
        box-shadow: var(--vario-shadow-button-pressed) !important;
        transition-duration: var(--vario-motion-button-press-duration) !important;
    }
}

html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:focus-visible,
html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab:focus-visible {
    z-index: 2 !important;
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: 0 !important;
}

@media (prefers-reduced-motion: reduce) {
    html .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab,
    html[data-vario-theme] .vario-document-subcategory-tabs[data-vario-subcategory-tabs-appearance="segmented"] .vario-document-subcategory-tab {
        transition-duration: 0.01ms !important;
    }
}