/* dgs Tabs Container - Main Container */
.dgs-tabs-container {
    border: 1px solid var(--base-trans-30);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: var(--space-m);
    width: 100%;
    border-radius: var(--radius, 0.5rem);
}

/* Square corners modifier */
.dgs-tabs-container--square {
    border-radius: 0;
}

/* Vertical tabs layout */
.dgs-tabs-container.is-vertical {
    flex-direction: row;
}

/* Navigation wrapper */
.dgs-tabs-navigation-wrapper {
    background-color: var(--base-ultra-light);
    border-bottom: 1px solid var(--base-trans-30);
}

.is-vertical .dgs-tabs-navigation-wrapper {
    border-bottom: none;
    border-right: 1px solid var(--base-trans-30);
    width: 25%;
    min-width: 200px;
}

/* Tab navigation */
.dgs-tabs-navigation {
    display: flex;
    flex-wrap: wrap;
    padding: var(--space-xs) var(--space-s) 0;
    gap: 0.5rem;
}

[data-alignment="center"].dgs-tabs-navigation {
    justify-content: center;
}

[data-alignment="right"].dgs-tabs-navigation {
    justify-content: flex-end;
}

.is-vertical .dgs-tabs-navigation {
    flex-direction: column;
    padding: var(--space-xs);
    margin-bottom: 0;
    margin-right: -1px;
}

/* Tab buttons */
.dgs-tab-button {
    padding: 0.8em 1.5em;
    font-size: var(--text-m);
    font-weight: var(--link-weight, 600);
    color: var(--primary);
    background-color: var(--base-ultra-light);
    border: 1px solid var(--base-trans-30);
    border-bottom: none;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    cursor: pointer;
    position: relative;
    transition: var(--transition);
    margin-bottom: -1px;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.dgs-tab-button .dgs-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.is-vertical .dgs-tab-button {
    border-bottom: 1px solid var(--base-trans-30);
    border-right: none;
    border-radius: var(--radius-xs) 0 0 var(--radius-xs);
    margin-bottom: 0;
    margin-right: -1px;
    width: 100%;
    text-align: left;
}

.dgs-tab-button:hover {
    background-color: var(--white);
    color: var(--action);
}

.dgs-tab-button[aria-selected="true"],
.dgs-tab-button.is-active {
    background-color: var(--white);
    color: var(--action);
    font-weight: bold;
    border-color: var(--base-trans-30);
    /* border-bottom: 1px solid var(--white); */
    z-index: 1;
}

.is-vertical .dgs-tab-button[aria-selected="true"],
.is-vertical .dgs-tab-button.is-active {
    border-right: 1px solid var(--white);
    border-bottom: none;
}

.dgs-tab-button:focus-visible {
    outline: 2px solid var(--action-trans-40);
    outline-offset: 2px;
    z-index: 2;
}

/* Content container */
.dgs-tabs-content-container {
    background-color: var(--white);
    flex: 1;
    position: relative;
}

/* Tab panel styling */
.dgs-tab-panel {
    padding: var(--space-m);
}

/* Tab visibility - baseline */
.dgs-tab[aria-hidden="true"] {
    display: none !important;
}

.dgs-tab[aria-hidden="false"] {
    display: block !important;
}

/* Editor styling */
.dgs-tab-editor-info,
.dgs-tabs-editor-info {
    background-color: var(--base-ultra-light);
    color: var(--primary);
    padding: 0.5em;
    margin-bottom: var(--space-xs);
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    /* border: 1px dashed var(--base-trans-30); */
}

.dgs-tabs-editor-info {
    text-align: center;
}

.editor-styles-wrapper .dgs-tab-editor-info small {
    font-size: var(--text-s);
    opacity: 0.8;
}

/* WordPress admin/editor specific styles */
.wp-admin .dgs-tabs-container {
    min-height: 150px;
}

.wp-admin .dgs-tabs-content-container {
    min-height: 100px;
}

/* Responsive styles */
@media (max-width: 768px) {
    .dgs-tabs-container.is-vertical {
        flex-direction: column;
    }

    .is-vertical .dgs-tabs-navigation-wrapper {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--base-trans-30);
    }

    .is-vertical .dgs-tabs-navigation {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-right: 0;
        padding-bottom: var(--space-xs);
    }

    .is-vertical .dgs-tab-button {
        border-right: 1px solid var(--base-trans-30);
        border-radius: var(--radius-xs) var(--radius-xs) 0 0;
        margin-right: 0;
        margin-bottom: -1px;
        width: auto;
        flex-shrink: 0;
    }

    .is-vertical .dgs-tab-button[aria-selected="true"],
    .is-vertical .dgs-tab-button.is-active {
        border-right: 1px solid var(--base-trans-30);
        border-bottom: 1px solid var(--white);
    }

    .dgs-tab-button {
        font-size: var(--text-xs);
        padding: 0.6em 1em;
    }

    .dgs-tab-panel {
        padding: var(--space-s);
    }
}

/* Color Scheme Variations */

/* Primary color scheme (default) */
.dgs-tabs-container--primary {
    border-color: var(--primary-trans-20);
}

.dgs-tabs-container--primary .dgs-tabs-navigation-wrapper {
    background-color: var(--primary-ultra-light);
    border-color: var(--primary-trans-20);
}

.dgs-tabs-container--primary .dgs-tab-button {
    background-color: var(--primary-ultra-light);
    color: var(--primary);
    border-color: var(--primary-trans-20);
}

.dgs-tabs-container--primary .dgs-tab-button:hover {
    background-color: var(--white);
    color: var(--primary-dark);
}

.dgs-tabs-container--primary .dgs-tab-button[aria-selected="true"],
.dgs-tabs-container--primary .dgs-tab-button.is-active {
    background-color: var(--white);
    color: var(--primary);
    border-color: var(--primary-trans-20);
}

/* Action color scheme */
.dgs-tabs-container--action {
    border-color: var(--action-trans-20);
}

.dgs-tabs-container--action .dgs-tabs-navigation-wrapper {
    background-color: var(--action-ultra-light);
    border-color: var(--action-trans-20);
}

.dgs-tabs-container--action .dgs-tab-button {
    background-color: var(--action-ultra-light);
    color: var(--action);
    border-color: var(--action-trans-20);
}

.dgs-tabs-container--action .dgs-tab-button:hover {
    background-color: var(--white);
    color: var(--action-dark);
}

.dgs-tabs-container--action .dgs-tab-button[aria-selected="true"],
.dgs-tabs-container--action .dgs-tab-button.is-active {
    background-color: var(--white);
    color: var(--action);
    border-color: var(--action-trans-20);
}

/* Secondary color scheme */
.dgs-tabs-container--secondary {
    border-color: var(--secondary-trans-20);
}

.dgs-tabs-container--secondary .dgs-tabs-navigation-wrapper {
    background-color: var(--secondary-ultra-light);
    border-color: var(--secondary-trans-20);
}

.dgs-tabs-container--secondary .dgs-tab-button {
    background-color: var(--secondary-ultra-light);
    color: var(--secondary);
    border-color: var(--secondary-trans-20);
}

.dgs-tabs-container--secondary .dgs-tab-button:hover {
    background-color: var(--white);
    color: var(--secondary-dark);
}

.dgs-tabs-container--secondary .dgs-tab-button[aria-selected="true"],
.dgs-tabs-container--secondary .dgs-tab-button.is-active {
    background-color: var(--white);
    color: var(--secondary);
    border-color: var(--secondary-trans-20);
}

/* Accent color scheme */
.dgs-tabs-container--accent {
    border-color: var(--accent-trans-20);
}

.dgs-tabs-container--accent .dgs-tabs-navigation-wrapper {
    background-color: var(--accent-ultra-light);
    border-color: var(--accent-trans-20);
}

.dgs-tabs-container--accent .dgs-tab-button {
    background-color: var(--accent-ultra-light);
    color: var(--accent);
    border-color: var(--accent-trans-20);
}

.dgs-tabs-container--accent .dgs-tab-button:hover {
    background-color: var(--white);
    color: var(--accent-dark);
}

.dgs-tabs-container--accent .dgs-tab-button[aria-selected="true"],
.dgs-tabs-container--accent .dgs-tab-button.is-active {
    background-color: var(--white);
    color: var(--accent);
    border-color: var(--accent-trans-20);
}

/* Neutral color scheme */
.dgs-tabs-container--neutral {
    border-color: var(--neutral-trans-20);
}

.dgs-tabs-container--neutral .dgs-tabs-navigation-wrapper {
    background-color: var(--neutral-ultra-light);
    border-color: var(--neutral-trans-20);
}

.dgs-tabs-container--neutral .dgs-tab-button {
    background-color: var(--neutral-ultra-light);
    color: var(--neutral);
    border-color: var(--neutral-trans-20);
}

.dgs-tabs-container--neutral .dgs-tab-button:hover {
    background-color: var(--white);
    color: var(--neutral-dark);
}

.dgs-tabs-container--neutral .dgs-tab-button[aria-selected="true"],
.dgs-tabs-container--neutral .dgs-tab-button.is-active {
    background-color: var(--white);
    color: var(--neutral);
    border-color: var(--neutral-trans-20);
}