////
///
/// Controls Classes
/// =========================================================================
///
/// This module provides ready-to-use CSS classes for user interaction
/// controls including cursor styles, scroll behavior, touch handling,
/// selection styling, and virtual keyboard components.
///
/// @group Classes
/// @author Scape Agency
/// @link https://move.gl
/// @since 0.1.0 initial release
/// @access public
///
////


// ============================================================================
// Use
// ============================================================================

@use "../mixins" as *;


// ============================================================================
// Cursor Classes
// ============================================================================

/// Default cursor styles
.cursor--auto { cursor: auto; }
.cursor--default { cursor: default; }
.cursor--none { cursor: none; }

/// Interactive cursor styles
.cursor--pointer { cursor: pointer; }
.cursor--help { cursor: help; }
.cursor--context-menu { cursor: context-menu; }
.cursor--progress { cursor: progress; }
.cursor--wait { cursor: wait; }

/// Selection cursor styles
.cursor--text { cursor: text; }
.cursor--vertical-text { cursor: vertical-text; }
.cursor--cell { cursor: cell; }
.cursor--crosshair { cursor: crosshair; }

/// Drag and drop cursor styles
.cursor--move { cursor: move; }
.cursor--grab { cursor: grab; }
.cursor--grabbing { cursor: grabbing; }
.cursor--copy { cursor: copy; }
.cursor--alias { cursor: alias; }
.cursor--no-drop { cursor: no-drop; }
.cursor--not-allowed { cursor: not-allowed; }

/// Resize cursor styles
.cursor--col-resize { cursor: col-resize; }
.cursor--row-resize { cursor: row-resize; }
.cursor--n-resize { cursor: n-resize; }
.cursor--e-resize { cursor: e-resize; }
.cursor--s-resize { cursor: s-resize; }
.cursor--w-resize { cursor: w-resize; }
.cursor--ne-resize { cursor: ne-resize; }
.cursor--nw-resize { cursor: nw-resize; }
.cursor--se-resize { cursor: se-resize; }
.cursor--sw-resize { cursor: sw-resize; }
.cursor--ew-resize { cursor: ew-resize; }
.cursor--ns-resize { cursor: ns-resize; }
.cursor--nesw-resize { cursor: nesw-resize; }
.cursor--nwse-resize { cursor: nwse-resize; }
.cursor--all-scroll { cursor: all-scroll; }

/// Zoom cursor styles
.cursor--zoom-in { cursor: zoom-in; }
.cursor--zoom-out { cursor: zoom-out; }


// ============================================================================
// Scroll Classes
// ============================================================================

/// Scroll behavior
.scroll--smooth { scroll-behavior: smooth; }
.scroll--auto { scroll-behavior: auto; }

/// Overflow handling
.overflow--auto { overflow: auto; }
.overflow--hidden { overflow: hidden; }
.overflow--visible { overflow: visible; }
.overflow--scroll { overflow: scroll; }
.overflow-x--auto { overflow-x: auto; }
.overflow-x--hidden { overflow-x: hidden; }
.overflow-x--scroll { overflow-x: scroll; }
.overflow-y--auto { overflow-y: auto; }
.overflow-y--hidden { overflow-y: hidden; }
.overflow-y--scroll { overflow-y: scroll; }

/// Overscroll behavior
.overscroll--auto { overscroll-behavior: auto; }
.overscroll--contain { overscroll-behavior: contain; }
.overscroll--none { overscroll-behavior: none; }


// ============================================================================
// Touch Classes
// ============================================================================

/// Touch action classes
.touch--auto { touch-action: auto; }
.touch--none { touch-action: none; }
.touch--pan-x { touch-action: pan-x; }
.touch--pan-y { touch-action: pan-y; }
.touch--pan-left { touch-action: pan-left; }
.touch--pan-right { touch-action: pan-right; }
.touch--pan-up { touch-action: pan-up; }
.touch--pan-down { touch-action: pan-down; }
.touch--pinch-zoom { touch-action: pinch-zoom; }
.touch--manipulation { touch-action: manipulation; }

/// Pointer events
.pointer--auto { pointer-events: auto; }
.pointer--none { pointer-events: none; }


// ============================================================================
// Selection Classes
// ============================================================================

/// User selection control
.select--none { user-select: none; }
.select--text { user-select: text; }
.select--all { user-select: all; }
.select--auto { user-select: auto; }


// ============================================================================
// Hover Classes
// ============================================================================

/// Hover opacity effects
.hover--opacity-50:hover { opacity: 0.5; }
.hover--opacity-75:hover { opacity: 0.75; }
.hover--opacity-100:hover { opacity: 1; }

/// Hover scale effects
.hover--scale:hover { transform: scale(1.05); }
.hover--scale-sm:hover { transform: scale(1.02); }
.hover--scale-lg:hover { transform: scale(1.1); }


// ============================================================================
// Keyboard Container Classes
// ============================================================================

/// Main keyboard container
.keyboard {
    @include keyboard_container;
}


// ============================================================================
// Keyboard Row Classes
// ============================================================================

/// Keyboard row layout
.keyboard__row {
    @include keyboard_row;
}


// ============================================================================
// Keyboard Key Classes
// ============================================================================

/// Base key styling
.key {
    @include key_base;
}

/// Space key (wide)
.key--space {
    @include key_space;
}

/// Special keys (shift, backspace, enter)
.key--shift,
.key--backspace,
.key--enter {
    @include key_special;
}

/// Mode switch key
.key--mode {
    @include key_mode;

    &:hover {
        background: var(--key-mode-bg-hover, #5a6fd6);
    }
}


// ============================================================================
// Keyboard Input Classes
// ============================================================================

/// Keyboard input field
.keyboard__input {
    @include keyboard_input;
}


// ============================================================================
// Keyboard Mode Classes
// ============================================================================

/// Mode button container
.keyboard__modes {
    @include keyboard_modes;
}

/// Mode button styling
.keyboard__mode-btn {
    @include keyboard_mode_btn;
}


// ============================================================================
// Keyboard Stats Classes
// ============================================================================

/// Stats display for keyboard metrics
.keyboard__stats {
    @include keyboard_stats;
}


// ============================================================================
// Keyboard Theme Classes
// ============================================================================

/// Dark theme support for keyboard
[data-theme="dark"] {
    .keyboard {
        @include keyboard_dark;
    }
}


// ============================================================================
// Screensaver Classes
// ============================================================================

/// Screensaver keyframes
@include keyframes_screensaver_float;

/// Main screensaver overlay
.screensaver {
    @include screensaver_container;

    &.active {
        @include screensaver_active;
    }
}

/// Screensaver content wrapper
.screensaver__content {
    @include screensaver_content;
}

/// Screensaver icon
.screensaver__icon {
    @include screensaver_icon;
}

/// Screensaver title
.screensaver__title {
    @include screensaver_title;
}

/// Screensaver subtitle/hint
.screensaver__hint {
    @include screensaver_hint;
}

/// Video element for screensaver
.screensaver__video {
    @include screensaver_video;
    pointer-events: none;
}

/// Gradient overlay for screensaver
.screensaver__overlay {
    @include screensaver_gradient_overlay;
}

/// Dark screensaver theme
.screensaver--dark {
    @include screensaver_dark;
}

/// Light screensaver theme
.screensaver--light {
    @include screensaver_light;
}

/// Gradient screensaver theme
.screensaver--gradient {
    --screensaver-bg: transparent;

    .screensaver__overlay {
        opacity: 1;
    }
}