/**
 * Project glow — tier M (controls).
 * Primary/black — inset + ring box-shadow.
 * Soft buttons — inner-depth в buttons.css (--gc-btn-soft-hover-shadow).
 * Select / carousel — closed ring ::before. Spec: docs/ui-kit/CONTROL_GLOW.md
 */

/* ─── Global off ─────────────────────────────────────────────────────────── */

html[data-gc-control-glow='off'] .gc-select-trigger.gc-card-glow-shell--control::before,
html[data-gc-control-glow='off'] .carousel-nav::before {
    opacity: 0 !important;
}

/* ─── Tokens ─────────────────────────────────────────────────────────────── */

.gc-card-glow-shell--control,
.carousel-nav,
.gc-btn-bordered.gc-dropdown-toggle,
.gc-dropdown-toggle-icon.gc-dropdown-toggle-bordered {
    --gc-control-glow-active: 1;
    --gc-control-glow-rest-border: color-mix(in srgb, var(--border-default) 44%, var(--border-subtle));
    --gc-control-glow-hover-edge: color-mix(
        in srgb,
        var(--fill-emphasis-inverse) 6%,
        var(--gc-control-glow-rest-border)
    );
    /* primary/black — inset + 1px ring */
    --gc-control-primary-glow-inset: color-mix(in srgb, var(--fill-emphasis) 52%, transparent);
    --gc-control-primary-glow-ring: color-mix(in srgb, var(--fill-emphasis) 38%, transparent);
}

html[data-theme='light'] .gc-card-glow-shell--control,
html[data-theme='light'] .carousel-nav,
html[data-theme='light'] .gc-btn-bordered.gc-dropdown-toggle,
html[data-theme='light'] .gc-dropdown-toggle-icon.gc-dropdown-toggle-bordered {
    --gc-control-glow-rest-border: color-mix(in srgb, var(--border-default) 36%, var(--border-subtle));
    --gc-control-glow-hover-edge: color-mix(
        in srgb,
        var(--fill-emphasis) 5%,
        var(--gc-control-glow-rest-border)
    );
    --gc-control-primary-glow-inset: color-mix(in srgb, var(--fill-emphasis-inverse) 62%, transparent);
    --gc-control-primary-glow-ring: color-mix(in srgb, var(--fill-emphasis-inverse) 46%, transparent);
}

@media (prefers-color-scheme: light) {
    :root:not([data-theme]) .gc-card-glow-shell--control,
    :root:not([data-theme]) .carousel-nav,
    :root:not([data-theme]) .gc-btn-bordered.gc-dropdown-toggle,
    :root:not([data-theme]) .gc-dropdown-toggle-icon.gc-dropdown-toggle-bordered {
        --gc-control-glow-rest-border: color-mix(in srgb, var(--border-default) 36%, var(--border-subtle));
        --gc-control-glow-hover-edge: color-mix(
            in srgb,
            var(--fill-emphasis) 5%,
            var(--gc-control-glow-rest-border)
        );
        --gc-control-primary-glow-inset: color-mix(in srgb, var(--fill-emphasis-inverse) 62%, transparent);
        --gc-control-primary-glow-ring: color-mix(in srgb, var(--fill-emphasis-inverse) 46%, transparent);
    }
}

.gc-card-glow-shell--control[data-glow-tone] {
    --gc-control-primary-glow-ring: color-mix(
        in srgb,
        var(--gc-card-glow-chroma) 38%,
        transparent
    );
}

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.gc-card-glow-shell--control {
    position: relative;
    isolation: isolate;
}

/* Select / carousel — closed ring (кнопки soft — без ::before) */
.gc-select-trigger.gc-card-glow-shell--control::before,
.carousel-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: var(--gc-card-glow-radius, var(--radius-12));
    padding: 1px;
    background: var(--gc-control-glow-hover-edge);
    -webkit-mask:
        linear-gradient(var(--fill-emphasis) 0 0) content-box,
        linear-gradient(var(--fill-emphasis) 0 0);
    mask:
        linear-gradient(var(--fill-emphasis) 0 0) content-box,
        linear-gradient(var(--fill-emphasis) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity var(--gc-card-glow-transition-duration, 85ms)
        var(--gc-card-glow-transition-ease, var(--ease-in));
    opacity: 0;
    z-index: 2;
}

.gc-btn.gc-card-glow-shell--control::before,
.gc-btn-bordered.gc-dropdown-toggle::before,
.gc-dropdown-toggle-icon.gc-dropdown-toggle-bordered::before {
    content: none;
    display: none;
}

/* ─── Soft buttons — shadow из buttons.css (--gc-btn-soft-hover-shadow) ─── */

/* ─── Primary / black — inset + hairline ring (box-shadow only) ─────────── */

.gc-btn-primary.gc-card-glow-shell--control,
.gc-btn-black.gc-card-glow-shell--control {
    background-clip: padding-box;
    -webkit-background-clip: padding-box;
}

html:not([data-gc-control-glow='off']) .gc-btn-primary.gc-card-glow-shell--control:hover:not(:disabled):not([disabled]):not(:focus-visible),
html:not([data-gc-control-glow='off']) .gc-btn-black.gc-card-glow-shell--control:hover:not(:disabled):not([disabled]):not(:focus-visible) {
    box-shadow:
        inset 0 1px 0 var(--gc-control-primary-glow-inset),
        0 0 0 1px var(--gc-control-primary-glow-ring);
}

html.gc-touch-scrolling:not([data-gc-control-glow='off']) .gc-btn-primary.gc-card-glow-shell--control:is(:hover, :active),
html.gc-touch-scrolling:not([data-gc-control-glow='off']) .gc-btn-black.gc-card-glow-shell--control:is(:hover, :active) {
    box-shadow: var(--gc-btn-elevation), var(--gc-btn-hairline);
}

html:not([data-gc-control-glow='off']) .gc-btn-primary.gc-card-glow-shell--control:focus-visible,
html:not([data-gc-control-glow='off']) .gc-btn-black.gc-card-glow-shell--control:focus-visible {
    box-shadow:
        inset 0 1px 0 var(--gc-control-primary-glow-inset),
        0 0 0 1px var(--gc-control-primary-glow-ring);
}

/* ─── Focus (soft) ───────────────────────────────────────────────────────── */

html:not([data-gc-control-glow='off']) :is(
    .gc-btn-secondary,
    .gc-btn-subtle,
    .gc-btn-bordered
).gc-card-glow-shell--control:focus-visible {
    box-shadow: var(--gc-btn-soft-hover-shadow);
}

html:not([data-gc-control-glow='off']) .gc-btn-outline.gc-card-glow-shell--control:focus-visible {
    box-shadow: var(--gc-btn-hairline), var(--gc-btn-soft-hover-shadow);
}

/* ─── Carousel ───────────────────────────────────────────────────────────── */

.carousel-nav {
    --gc-card-glow-radius: var(--radius-full);
    background-clip: padding-box;
}

html:not([data-gc-control-glow='off']) .carousel-nav:hover:not(:disabled),
html:not([data-gc-control-glow='off']) .carousel-nav:focus-visible {
    border-color: transparent;
}

html:not([data-gc-control-glow='off']) .carousel-nav:focus-visible {
    outline: var(--gc-focus-outline);
    outline-offset: var(--gc-focus-outline-offset);
    box-shadow: none;
}

html:not([data-gc-control-glow='off']) .carousel-nav:hover:not(:disabled)::before,
html:not([data-gc-control-glow='off']) .carousel-nav:focus-visible::before {
    opacity: var(--gc-control-glow-active);
}

.carousel-nav:disabled::before {
    opacity: 0;
}

/* ─── Select ─────────────────────────────────────────────────────────────── */

.gc-select-trigger.gc-card-glow-shell--control {
    --gc-card-glow-radius: var(--gc-input-radius);
    background-clip: padding-box;
}

html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control:hover,
html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control:focus-visible,
html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control.active {
    border-color: transparent;
    box-shadow: none;
}

html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control:focus-visible,
html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control.active {
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.gc-select-sm .gc-select-trigger.gc-card-glow-shell--control {
    --gc-card-glow-radius: var(--gc-input-radius-sm);
}

.gc-select-lg .gc-select-trigger.gc-card-glow-shell--control {
    --gc-card-glow-radius: var(--gc-input-radius-lg);
}

html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control:hover::before,
html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control:focus-visible::before,
html:not([data-gc-control-glow='off']) .gc-select-trigger.gc-card-glow-shell--control.active::before {
    opacity: var(--gc-control-glow-active);
}

.gc-select-trigger.gc-select-disabled.gc-card-glow-shell--control::before {
    opacity: 0;
}

/* ─── Calculator ± — closed ring ::before (кнопка, не input: у replaced нет ::before) ─── */

.calculator-fields .gc-btn.gc-card-glow-shell--control::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    border-radius: var(--gc-card-glow-radius, var(--radius-12));
    padding: 1px;
    background: var(--gc-control-glow-hover-edge);
    -webkit-mask:
        linear-gradient(var(--fill-emphasis) 0 0) content-box,
        linear-gradient(var(--fill-emphasis) 0 0);
    mask:
        linear-gradient(var(--fill-emphasis) 0 0) content-box,
        linear-gradient(var(--fill-emphasis) 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    transition: opacity var(--gc-card-glow-transition-duration, 85ms)
        var(--gc-card-glow-transition-ease, var(--ease-in));
    opacity: 0;
    z-index: 2;
}

html:not([data-gc-control-glow='off']) .calculator-fields .gc-btn.gc-card-glow-shell--control:hover:not(:disabled):not([disabled]) {
    --gc-btn-hairline: 0 0 #0000;
}

html:not([data-gc-control-glow='off']) .calculator-fields .gc-btn.gc-card-glow-shell--control:hover:not(:disabled):not([disabled])::before,
html:not([data-gc-control-glow='off']) .calculator-fields .gc-btn.gc-card-glow-shell--control:focus-visible::before {
    opacity: var(--gc-control-glow-active);
}

.calculator-fields .gc-btn.gc-card-glow-shell--control:disabled::before {
    opacity: 0;
}