// Hikari Checkbox Component Styles
// Use theme variables with namespace to avoid conflicts
@use 'variables' as vars;
@use 'mixins' as mix;

// ============================================
// Hikari Checkbox Component
// Features:  styling, smooth transitions, glow effects
// Uses Layer 2 CSS variables (--hi-component-selection-*)
// ============================================

// Label wrapper
// ============================================
.hi-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;

    &:hover .hi-checkbox:not(.hi-checkbox-disabled) {
        border-color: var(--hi-primary);
        box-shadow: 0 0 8px var(--hi-component-selection-glow);
    }
}

// ============================================
// Hidden native input
// ============================================

.hi-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
}

// ============================================
// Custom checkbox box
// Uses Layer 2 variables
// ============================================

.hi-checkbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid var(--hi-component-selection-border);
    background: var(--hi-component-selection-surface);
    border-radius: vars.$hikari-radius-fui-sm;
    transition: all vars.$hikari-duration-fast vars.$hikari-ease-smooth;
    box-sizing: border-box;
}

// ============================================
// Size Variants
// ============================================

.hi-checkbox-sm {
    width: 16px;
    height: 16px;
}

.hi-checkbox-md {
    width: 20px;
    height: 20px;
}

.hi-checkbox-lg {
    width: 24px;
    height: 24px;
}

// ============================================
// Checkmark icon (SVG)
// Uses Layer 2 icon color
// ============================================

.hi-checkbox-icon {
    color: var(--hi-component-selection-icon);
    width: 70%;
    height: 70%;
    opacity: 1;
    transform: scale(0.3);
    pointer-events: none;
    display: block;
    flex-shrink: 0;
}

// Unchecked state - icon visible but semi-transparent
.hi-checkbox:not(.hi-checkbox-checked) .hi-checkbox-icon.hi-checkbox-icon {
    opacity: 0.3;
}

// Checked state - icon fully visible and scaled
.hi-checkbox-checked .hi-checkbox-icon.hi-checkbox-icon {
    opacity: 1;
    transform: scale(1);
}

// ============================================
// Checked state
// Uses Layer 2 gradient background
// ============================================

.hi-checkbox-checked {
    background: var(--hi-component-selection-bg);
    border-color: var(--hi-primary);
    box-shadow:
        0 0 6px var(--hi-component-selection-glow),
        inset 0 0 3px rgba(255, 255, 255, 0.15);
}

// ============================================
// Hover effect on checked
// ============================================

.hi-checkbox-label:hover .hi-checkbox-checked:not(.hi-checkbox-disabled) {
    box-shadow:
        0 0 10px var(--hi-component-selection-glow),
        inset 0 0 4px rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

// ============================================
// Disabled state
// ============================================

.hi-checkbox-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--hi-component-selection-surface);
    border-color: var(--hi-component-selection-border);
}

// ============================================
// Label text
// ============================================

.hi-checkbox-text {
    font-family: vars.$hikari-font-family-sans;
    font-size: vars.$hikari-font-size-base;
    font-weight: 400;
    color: var(--hi-text-primary);
    line-height: 1.5;
    white-space: nowrap;
}

// ============================================
// Disabled label
// ============================================

.hi-checkbox-label:has(.hi-checkbox-disabled) {
    cursor: not-allowed;
}
