/**
 * Ally Blocks Pro — Tabs Pro Styles (Circle / Pill)
 * Loaded only when Ally Blocks Pro is active.
 * Shape is owned here; color is driven by the Free tab CSS variables
 * (--at-tab-bg, --at-tab-active-bg, --at-tab-hover-bg, etc.) with
 * sensible fallbacks so a new circle looks right before colors are set.
 */

/* ---------- CIRCLE ---------- */
.at-tabs--style-circle .at-tabs__nav {
    flex-wrap: wrap;
}

.at-tabs--style-circle .at-tabs__tab {
    /* Shape: equal width/height + full radius = circle */
    width:  var(--at-tab-size, 130px);
    height: var(--at-tab-size, 130px);
    min-width:  44px;   /* WCAG 2.5.8 floor */
    min-height: 44px;
    max-width:  var(--at-tab-size, 130px);
    max-height: var(--at-tab-size, 130px);
    padding: 15px;
    border-radius: 50%;
    line-height: 1.25em;
    margin: 10px;
    transition: background-color .5s, color .5s, outline-color .5s;

    background-color: var(--at-tab-bg, #004E1B);
    color: var(--at-tab-color, #fff);
    border: var(--at-tab-border-width, 1px)
            var(--at-tab-border-style, solid)
            var(--at-tab-border-color, #fff);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.at-tabs__tab-label {
    display: inline-flex;
    align-items: center;
    flex: unset;
    }


.at-tabs--style-circle .at-tabs__tab--active {
    background-color: var(--at-tab-active-bg, #042952);
    color: var(--at-tab-active-color, #fff);
}

/* Hover: keep the dotted outline as a non-color affordance (per your design) */
.at-tabs--style-circle .at-tabs__tab:hover {
    outline: 3px dotted var(--at-tab-focus-outline-color, #fff);
    outline-offset: -6px;   /* negative so the ring isn't clipped by overflow/radius */
    background-color: var(--at-tab-hover-bg, #AD5100);
    color: var(--at-tab-hover-color, #fff);
}

/* Keyboard focus: same visible ring, but only for keyboard users */
.at-tabs--style-circle .at-tabs__tab:focus-visible {
    outline: 3px dotted var(--at-tab-focus-outline-color, #fff);
    outline-offset: -6px;
    background-color: var(--at-tab-hover-bg, #AD5100);
    color: var(--at-tab-hover-color, #fff);
}

/* ---------- PILL ---------- */
.at-tabs--style-pill .at-tabs__nav {
    flex-wrap: wrap;
}

.at-tabs--style-pill .at-tabs__tab {
    /* Pill grows with content; height tracks the size var, width is auto */
    min-height: var(--at-tab-size, 48px);
    min-width: 44px;        /* WCAG 2.5.8 floor */
    width: auto;
    padding: 0 24px;
    border-radius: 9999px;  /* full pill ends regardless of width */
    line-height: 1.25em;
    margin: 6px;
    transition: background-color .5s, color .5s, outline-color .5s;

    background-color: var(--at-tab-bg, #004E1B);
    color: var(--at-tab-color, #fff);
    border: var(--at-tab-border-width, 1px)
            var(--at-tab-border-style, solid)
            var(--at-tab-border-color, #fff);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.at-tabs--style-pill .at-tabs__tab--active {
    background-color: var(--at-tab-active-bg, #042952);
    color: var(--at-tab-active-color, #fff);
}

.at-tabs--style-pill .at-tabs__tab:hover {
    outline: 3px dotted var(--at-tab-focus-outline-color, #fff);
    outline-offset: -4px;
    background-color: var(--at-tab-hover-bg, #AD5100);
    color: var(--at-tab-hover-color, #fff);
}

.at-tabs--style-pill .at-tabs__tab:focus-visible {
    outline: 3px dotted var(--at-tab-focus-outline-color, #fff);
    outline-offset: -4px;
    background-color: var(--at-tab-hover-bg, #AD5100);
    color: var(--at-tab-hover-color, #fff);
}

.at-tabs--style-circle .at-tabs__tab--active .at-tabs__icon {
    display: flex;
    }

.at-tabs--style-circle .at-tabs__tab .at-tabs__icon {
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin: 0;
}