/*
 * Front-end and editor styles for Emmker's Tab System.
 *
 * These rules define the appearance of the tab navigation, panels and
 * animations. CSS custom properties (variables) are used to inject
 * user-defined values from the block attributes. When attributes are
 * empty, reasonable defaults apply. The rules also lightly resemble
 * the styling of Stackable blocks to integrate visually with Stackable’s
 * aesthetic.
 */

.emmkers-tabs {
    margin: 1em 0;
    width: 100%;
    font-family: inherit;
    color: inherit;
}

.emmkers-tabs-wrapper {
    /* Expose CSS variables for customizing appearance. Defaults fallback to
       neutral colours if attributes are not set. */
    --emmker-tabs-text-color: var(--emmker-tabs-text-color, #333);
    --emmker-tabs-bg-color: var(--emmker-tabs-bg-color, #f5f5f5);
    --emmker-tabs-active-bg-color: var(--emmker-tabs-active-bg-color, #fff);
    --emmker-tabs-border-color: var(--emmker-tabs-border-color, #e0e0e0);
    --emmker-tabs-border-radius: var(--emmker-tabs-border-radius, 0px);
    --emmker-tabs-indicator-color: var(--emmker-tabs-indicator-color, currentColor);
}

.emmkers-tabs-nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid var(--emmker-tabs-border-color);
}

.emmkers-tab-button {
    margin: 0;
    padding: 0.6em 1em;
    background-color: var(--emmker-tabs-bg-color);
    border: none;
    border-top-left-radius: var(--emmker-tabs-border-radius);
    border-top-right-radius: var(--emmker-tabs-border-radius);
    border-bottom: 3px solid transparent;
    color: var(--emmker-tabs-text-color);
    font-size: 0.95em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.emmkers-tab-button:not(.active):hover {
    background-color: var(--emmker-tabs-active-bg-color);
}

.emmkers-tab-button.active {
    background-color: var(--emmker-tabs-active-bg-color);
    border-bottom: 3px solid var(--emmker-tabs-indicator-color);
    position: relative;
    z-index: 2;
}

.emmkers-tabs-panels {
    border: 1px solid var(--emmker-tabs-border-color);
    border-top: none;
    border-bottom-left-radius: var(--emmker-tabs-border-radius);
    border-bottom-right-radius: var(--emmker-tabs-border-radius);
    padding: 1em;
    background-color: var(--emmker-tabs-active-bg-color);
}

.emmkers-tab-panel {
    display: none;
}

.emmkers-tab-panel.active {
    display: block;
}

/* Editor-specific adjustments for a better editing experience. The editor
   automatically scopes styles, but we include some selectors for clarity. */
.editor-styles-wrapper .emmkers-tabs-nav {
    cursor: default;
}

.editor-styles-wrapper .emmkers-tab-button {
    pointer-events: none;
}

.editor-styles-wrapper .emmkers-tab-panel {
    display: block !important;
}