/* Shared appearance for native tabs and DevExtreme management editor tabs. */
.management-editor-tabs {
    padding: 0;
    border: 0;
    background: #fff;
}

.wc-tab-list,
.management-editor-tabs .dx-tabs {
    display: flex;
    gap: .25rem;
    overflow-x: auto;
    padding-block: 12px;
    border: 0;
    border-bottom: 1px solid #dfe3e8;
    background: #fff;
}

.wc-tab-list,
.management-editor-tabs .dx-tabpanel-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
}

/* Management pop-up scroll containers have 24px of content padding. */
.wc-tab-list--popup,
.management-editor-tabs .dx-tabpanel-tabs {
    top: -24px;
}

.management-editor-tabs .dx-tabs {
    position: static;
    border: 0 !important;
    border-bottom: 1px solid #dfe3e8 !important;
}

.management-editor-tabs .dx-tabs-wrapper {
    display: flex;
    gap: .25rem;
    width: 100%;
    border: 0 !important;
    background: transparent;
}

.management-editor-tabs .dx-tabs-wrapper::after,
.management-editor-tabs .dx-tab::after {
    content: none !important;
    border: 0 !important;
}

.wc-tab,
.management-editor-tabs .dx-tab {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 12px 20px;
    border: 0 !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 6px 6px 0 0;
    background: transparent;
    color: #34495e;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
}

.wc-tab.is-active,
.management-editor-tabs .dx-tab.dx-tab-selected {
    border-bottom-color: #0d6efd !important;
    background: #e7f3ff;
    color: #0d6efd;
}

.wc-tab:hover,
.management-editor-tabs .dx-tab.dx-state-hover {
    background: #f0f6fc;
}

.wc-tab:focus-visible,
.management-editor-tabs .dx-tab:focus-visible,
.management-editor-tabs .dx-tabs:focus-visible .dx-tab.dx-state-focused {
    outline: 2px solid #0d6efd;
    outline-offset: -2px;
}

.management-editor-tabs .dx-tab .dx-tab-content,
.management-editor-tabs .dx-tab .dx-tab-text {
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}