/* CaveCode GCL+ and PG Python Icons — Pass 3
   Icons inherit the active user-selected CaveCode theme. */

.cavecode-controls-language-icon {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    flex: 0 0 48px;
    color: var(--accent);
    background:
        color-mix(in srgb, var(--accent-surface) 66%, var(--surface) 34%);
    border: 1px solid
        color-mix(in srgb, var(--accent-border) 72%, var(--border) 28%);
    border-radius: 12px;
    box-shadow:
        inset 0 0 0 1px
        color-mix(in srgb, var(--accent) 10%, transparent),
        0 8px 24px
        color-mix(in srgb, var(--shadow) 72%, transparent);
}

.cavecode-controls-language-icon svg {
    display: block;
    width: 34px;
    height: 34px;
    overflow: visible;
}

.cavecode-controls-language-icon .cc-icon-primary {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cavecode-controls-language-icon .cc-icon-soft {
    fill:
        color-mix(in srgb, var(--accent) 18%, transparent);
    stroke: currentColor;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.cavecode-controls-language-icon .cc-icon-led {
    fill: currentColor;
    stroke: none;
    filter:
        drop-shadow(
            0 0 3px
            color-mix(in srgb, var(--accent-glow) 82%, transparent)
        );
}

html[data-mode="light"] .cavecode-controls-language-icon,
html[data-bs-theme="light"] .cavecode-controls-language-icon {
    background:
        color-mix(in srgb, var(--accent-surface) 26%, var(--surface) 74%);
}

@media (max-width: 520px) {
    .cavecode-controls-language-icon {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .cavecode-controls-language-icon svg {
        width: 31px;
        height: 31px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .cavecode-controls-language-icon {
        transition:
            transform .18s ease,
            border-color .18s ease,
            background-color .18s ease,
            color .18s ease;
    }

    [data-learning-difficulty-level]:hover
        .cavecode-controls-language-icon {
        transform: translateY(-1px);
        border-color: var(--accent);
    }
}