/* BOTB Icon Styles */

/* Base icon class */
.icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.icon-sm {
    width: 0.875em;
    height: 0.875em;
}

.icon-lg {
    width: 1.5em;
    height: 1.5em;
}

.icon-xl {
    width: 2em;
    height: 2em;
}

.icon-2xl {
    width: 2.5em;
    height: 2.5em;
}

.icon-3xl {
    width: 3em;
    height: 3em;
}

/* Quick link icons */
.quick-link-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    color: var(--primary);
}

.quick-link-icon .icon {
    width: 100%;
    height: 100%;
}

/* Vinyl icon in navbar - theme aware */
.vinyl-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    position: relative;
    border-radius: 50%;
}

.vinyl-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Static shine overlay - doesn't rotate with the record */
.vinyl-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 20deg,
        rgba(255, 255, 255, 0.12) 40deg,
        rgba(255, 255, 255, 0.18) 50deg,
        transparent 70deg,
        transparent 180deg,
        rgba(255, 255, 255, 0.06) 200deg,
        rgba(255, 255, 255, 0.1) 220deg,
        transparent 240deg,
        transparent 360deg
    );
    pointer-events: none;
    z-index: 2;
}

/* Light mode vinyl colors - classic black record */
:root .vinyl-icon,
[data-theme="light"] .vinyl-icon {
    --vinyl-outer: #1a1a1a;
    --vinyl-edge: #333;
    --vinyl-groove: #2a2a2a;
    --vinyl-label: #E85D04;
    --vinyl-hole: #1a1a1a;
}

/* Dark mode vinyl colors - stylized with gold accents */
[data-theme="dark"] .vinyl-icon {
    --vinyl-outer: #1e1e2e;
    --vinyl-edge: #FFD700;
    --vinyl-groove: #2a2a3e;
    --vinyl-label: #FFD700;
    --vinyl-hole: #0a0a12;
}

/* Dark mode has a golden tinted shine */
[data-theme="dark"] .vinyl-icon::after {
    background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 20deg,
        rgba(255, 215, 0, 0.08) 40deg,
        rgba(255, 215, 0, 0.15) 50deg,
        transparent 70deg,
        transparent 180deg,
        rgba(255, 215, 0, 0.05) 200deg,
        rgba(255, 215, 0, 0.08) 220deg,
        transparent 240deg,
        transparent 360deg
    );
}

/* Theme toggle button */
.theme-toggle {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    border: 1px solid var(--border);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.theme-toggle:hover {
    background: var(--bg-surface-hover);
    border-color: var(--primary);
}

.theme-toggle .icon {
    width: 18px;
    height: 18px;
    color: var(--text-primary);
}

/* Show/hide sun/moon based on theme */
.theme-toggle .icon-sun {
    display: none;
}

.theme-toggle .icon-moon {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
    display: none;
}

/* Status icons */
.icon-success {
    color: var(--color-success);
}

.icon-error {
    color: var(--color-error);
}

/* Voted badge with icon */
.matchup-voted-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.matchup-voted-badge .icon {
    width: 14px;
    height: 14px;
}