/**
 * Seven Menu — Trigger Button
 *
 * Styled via CSS custom properties set by CssVarsBuilder.
 * Defaults provided as fallbacks so the button is usable without inline vars.
 */

.sevn-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    background-color: var( --sevn-btn-bg, #333 );
    color: var( --sevn-btn-color, #fff );
    border: var( --sevn-btn-border, none );
    border-radius: var( --sevn-btn-radius, 4px );
    padding: var( --sevn-btn-padding, 0.625em 1.25em );
    font-size: var( --sevn-btn-font-size, 1rem );
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.sevn-trigger:hover {
    background-color: var( --sevn-btn-hover-bg, #555 );
    color: var( --sevn-btn-hover-color, #fff );
}

.sevn-trigger:focus-visible {
    outline: 2px solid var( --sevn-btn-bg, #333 );
    outline-offset: 2px;
}

.sevn-trigger__icon {
    display: inline-flex;
    align-items: center;
    font-size: 1.2em;
}

.sevn-trigger__icon--close {
    display: none;
}

.sevn-trigger[aria-expanded="true"] .sevn-trigger__icon--open {
    display: none;
}

.sevn-trigger[aria-expanded="true"] .sevn-trigger__icon--close {
    display: inline-flex;
}

.sevn-trigger__text {
    white-space: nowrap;
}

/* ── Mobile Text Swap ─────────────────────────────────────────────────── */
/*
 * When mobile_text is configured, ButtonRenderer outputs two spans:
 *   .sevn-trigger__text--desktop  (shown on desktop, hidden on mobile)
 *   .sevn-trigger__text--mobile   (hidden on desktop, shown on mobile)
 *
 * When mobile_text is empty but mobile_hide_text is implied (no mobile_text
 * and no mobile span rendered), the desktop text stays visible everywhere.
 *
 * The media query breakpoint matches the configured breakpoint via inline
 * <style> from ShortcodeHandler. Here we use a safe default.
 */

.sevn-trigger__text--mobile {
    display: none;
}

/* ── Reduced Motion ────────────────────────────────────────────────────── */

@media ( prefers-reduced-motion: reduce ) {
    .sevn-trigger {
        transition: none;
    }
}