/* Shared document-window tabs. Icon-field is the component default; legacy is explicit opt-out. */

html body [data-vario-component="VarioDocumentTab"] > .vario-document-tab-icon,
html[data-vario-theme] body [data-vario-component="VarioDocumentTab"] > .vario-document-tab-icon {
    display: contents;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"].vario-win-document-tabs,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"].vario-win-document-tabs {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    isolation: isolate !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--vario-size-document-window-tab-gap) !important;
    width: auto !important;
    height: var(--vario-size-document-window-tab-rail-height) !important;
    min-height: var(--vario-size-document-window-tab-rail-height) !important;
    max-height: var(--vario-size-document-window-tab-rail-height) !important;
    margin: 0 -8px !important;
    padding: 0 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    border: 0 !important;
    border-bottom: 1px solid var(--vario-component-document-window-tab-border) !important;
    border-radius: 0 !important;
    background: var(--vario-component-document-window-tabs-bg) !important;
    box-shadow: 0 2px 6px rgba(15, 47, 84, 0.10) !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"]::-webkit-scrollbar,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"]::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"],
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"] {
    position: relative !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: var(--vario-size-document-window-tab-content-gap) !important;
    width: auto !important;
    min-width: max-content !important;
    height: var(--vario-size-document-window-tab-height) !important;
    min-height: var(--vario-size-document-window-tab-height) !important;
    max-height: var(--vario-size-document-window-tab-height) !important;
    margin: 0 !important;
    padding: 0 var(--vario-size-document-window-tab-padding-right) 0 0 !important;
    overflow: hidden !important;
    border: 1px solid var(--vario-component-document-window-tab-border) !important;
    border-radius: var(--vario-size-document-window-tab-radius) !important;
    background: var(--vario-component-document-window-tab-bg) !important;
    color: var(--vario-component-document-window-tab-text) !important;
    box-shadow: 0 1px 2px rgba(6, 36, 68, 0.07) !important;
    box-sizing: border-box !important;
    font: 600 11px/16px var(--vario-font-family-ui) !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-shadow: none !important;
    white-space: nowrap !important;
    touch-action: manipulation !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),
        filter 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 body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"]::before,
html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"]::after,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"]::before,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"]::after {
    display: none !important;
    content: none !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] .vario-document-tab-icon,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] .vario-document-tab-icon {
    display: grid !important;
    flex: 0 0 var(--vario-size-document-window-tab-icon-width) !important;
    place-items: center !important;
    width: var(--vario-size-document-window-tab-icon-width) !important;
    min-width: var(--vario-size-document-window-tab-icon-width) !important;
    height: var(--vario-size-document-window-tab-icon-height) !important;
    margin: 0 !important;
    border: 0 !important;
    border-right: 1px solid var(--vario-component-document-window-tab-border) !important;
    border-radius: calc(var(--vario-size-document-window-tab-radius) - 1px) 0 0 calc(var(--vario-size-document-window-tab-radius) - 1px) !important;
    background: var(--vario-component-document-window-tab-icon-bg) !important;
    color: inherit !important;
    box-sizing: border-box !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] .vario-document-tab-icon .nav-icon,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] .vario-document-tab-icon .nav-icon {
    flex: 0 0 var(--vario-size-document-window-tab-icon-size) !important;
    width: var(--vario-size-document-window-tab-icon-size) !important;
    height: var(--vario-size-document-window-tab-icon-size) !important;
    margin: 0 !important;
    color: currentColor !important;
    stroke-width: 2.3 !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] .vario-document-tab-label,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] .vario-document-tab-label {
    display: block !important;
    min-width: 0 !important;
    line-height: 16px !important;
    white-space: nowrap !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"].active,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"].active {
    border-color: var(--vario-component-document-window-tab-active-border) !important;
    background: var(--vario-component-document-window-tab-active-bg) !important;
    color: var(--vario-component-document-window-tab-active-text) !important;
    box-shadow: 0 1px 3px rgba(18, 99, 241, 0.12) !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"].active .vario-document-tab-icon,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"].active .vario-document-tab-icon {
    border-right-color: var(--vario-component-document-window-tab-active-icon-bg) !important;
    background: var(--vario-component-document-window-tab-active-icon-bg) !important;
    color: var(--vario-color-text-on-primary) !important;
}

@media (hover: hover) {
    html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"][aria-selected]:not(:disabled):hover,
    html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"][aria-selected]:not(:disabled):hover {
        border-color: var(--vario-component-document-window-tab-active-border) !important;
        filter: var(--vario-filter-button-hover) !important;
        box-shadow: var(--vario-shadow-button-hover) !important;
    }
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"][aria-selected]:not(:disabled):active,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"][aria-selected]:not(:disabled):active {
    filter: var(--vario-filter-button-pressed) !important;
    box-shadow: var(--vario-shadow-button-pressed) !important;
    transition-duration: var(--vario-motion-button-press-duration) !important;
    transition-timing-function: var(--vario-motion-button-easing) !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"][aria-selected]:focus-visible,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-component-contract="document-tab-strip-v1"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"][aria-selected]:focus-visible {
    z-index: 1 !important;
    outline: 2px solid var(--vario-color-focus-ring) !important;
    outline-offset: -2px !important;
}

html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"]:disabled,
html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"]:disabled {
    opacity: 0.55 !important;
    filter: none !important;
    box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
    html body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"],
    html[data-vario-theme] body [data-vario-component="VarioDocumentTabStrip"][data-vario-tab-appearance="icon-field"] > button[data-vario-component="VarioDocumentTab"] {
        transition-duration: 0.01ms !important;
    }
}