// ==========================================================================
// SCROLLBAR UTILITIES
// ==========================================================================
// Scrollbar styling utilities with visibility options
// Theme-agnostic scrollbar controls
// ==========================================================================

// SCROLLBAR VISIBILITY OPTIONS
.scrollbar-visible {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);

  // Webkit scrollbar styling (Chrome, Safari, Edge)
  &::-webkit-scrollbar {
    width: #{$base-spacing-2}; // 8px
    height: #{$base-spacing-2};
  }

  &::-webkit-scrollbar-track {
    background: var(--scrollbar-track, transparent);
    border-radius: #{$base-border-radius-sm};
  }

  &::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
    border-radius: #{$base-border-radius-sm};
    border: 1px solid var(--scrollbar-thumb-border, transparent);

    &:hover {
      background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
    }

    &:active {
      background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
    }
  }

  &::-webkit-scrollbar-corner {
    background: var(--scrollbar-corner, transparent);
  }
}

.scrollbar-invisible {
  // Firefox
  scrollbar-width: none;
  
  // Internet Explorer and Edge
  -ms-overflow-style: none;

  // Webkit browsers (Chrome, Safari, newer Edge)
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

// SCROLLBAR SIZING OPTIONS
.scrollbar-thin {
  scrollbar-width: thin;
  
  &::-webkit-scrollbar {
    width: #{$base-spacing-1}; // 4px
    height: #{$base-spacing-1};
  }
}

.scrollbar-thick {
  scrollbar-width: auto;
  
  &::-webkit-scrollbar {
    width: #{$base-spacing-3}; // 12px
    height: #{$base-spacing-3};
  }
}

// SCROLLBAR BEHAVIOR OPTIONS
.scroll-smooth {
  scroll-behavior: smooth;
}

.scroll-auto {
  scroll-behavior: auto;
}

// OVERFLOW UTILITIES WITH SCROLLBAR CONTROL
.overflow-auto-visible {
  overflow: auto;
  @extend .scrollbar-visible;
}

.overflow-auto-invisible {
  overflow: auto;
  @extend .scrollbar-invisible;
}

.overflow-scroll-visible {
  overflow: scroll;
  @extend .scrollbar-visible;
}

.overflow-scroll-invisible {
  overflow: scroll;
  @extend .scrollbar-invisible;
}

.overflow-y-auto-visible {
  overflow-y: auto;
  overflow-x: hidden;
  @extend .scrollbar-visible;
}

.overflow-y-auto-invisible {
  overflow-y: auto;
  overflow-x: hidden;
  @extend .scrollbar-invisible;
}

.overflow-x-auto-visible {
  overflow-x: auto;
  overflow-y: hidden;
  @extend .scrollbar-visible;
}

.overflow-x-auto-invisible {
  overflow-x: auto;
  overflow-y: hidden;
  @extend .scrollbar-invisible;
}

// HOVER-BASED SCROLLBAR VISIBILITY
.scrollbar-hover {
  // Hide by default
  @extend .scrollbar-invisible;
  
  // Show on hover
  &:hover {
    @extend .scrollbar-visible;
  }
}

// FOCUS-BASED SCROLLBAR VISIBILITY
.scrollbar-focus {
  // Hide by default
  @extend .scrollbar-invisible;
  
  // Show on focus-within
  &:focus-within {
    @extend .scrollbar-visible;
  }
}

// SCROLLBAR THEME VARIANTS
.scrollbar-light {
  --scrollbar-track: rgba(255, 255, 255, 0.1);
  --scrollbar-thumb: rgba(255, 255, 255, 0.3);
  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.5);
  --scrollbar-thumb-active: rgba(255, 255, 255, 0.7);
  --scrollbar-thumb-border: rgba(255, 255, 255, 0.1);
}

.scrollbar-dark {
  --scrollbar-track: rgba(0, 0, 0, 0.1);
  --scrollbar-thumb: rgba(0, 0, 0, 0.3);
  --scrollbar-thumb-hover: rgba(0, 0, 0, 0.5);
  --scrollbar-thumb-active: rgba(0, 0, 0, 0.7);
  --scrollbar-thumb-border: rgba(0, 0, 0, 0.1);
}

// SCROLLBAR POSITION UTILITIES
.scroll-padding-block-start {
  scroll-padding-block-start: var(--scroll-padding-block-start, #{$semantic-spacing-layout-section-sm});
}

.scroll-padding-block-end {
  scroll-padding-block-end: var(--scroll-padding-block-end, #{$semantic-spacing-layout-section-sm});
}

.scroll-padding-inline-start {
  scroll-padding-inline-start: var(--scroll-padding-inline-start, #{$semantic-spacing-component-padding-lg});
}

.scroll-padding-inline-end {
  scroll-padding-inline-end: var(--scroll-padding-inline-end, #{$semantic-spacing-component-padding-lg});
}

// SCROLL SNAP UTILITIES
.scroll-snap-x {
  scroll-snap-type: x mandatory;
  
  > * {
    scroll-snap-align: start;
  }
}

.scroll-snap-y {
  scroll-snap-type: y mandatory;
  
  > * {
    scroll-snap-align: start;
  }
}

.scroll-snap-both {
  scroll-snap-type: both mandatory;
  
  > * {
    scroll-snap-align: start;
  }
}

.scroll-snap-proximity {
  scroll-snap-type: y proximity;
  
  > * {
    scroll-snap-align: start;
  }
}

.scroll-snap-center {
  > * {
    scroll-snap-align: center;
  }
}

.scroll-snap-end {
  > * {
    scroll-snap-align: end;
  }
}

// MOMENTUM SCROLLING (iOS)
.scroll-momentum {
  -webkit-overflow-scrolling: touch;
}

// CUSTOM SCROLLBAR COMPONENT CLASSES
.custom-scrollbar {
  // Base scrollbar with custom styling
  @extend .scrollbar-visible;
  
  &::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, 
      var(--scrollbar-gradient-start, #667eea), 
      var(--scrollbar-gradient-end, #764ba2)
    );
    border-radius: #{$base-border-radius-lg};
    border: 2px solid var(--scrollbar-border, transparent);
    
    &:hover {
      transform: scale(1.1);
      transition: transform 0.2s ease;
    }
  }
  
  &::-webkit-scrollbar-track {
    background: var(--scrollbar-track-custom, rgba(0, 0, 0, 0.05));
    border-radius: #{$base-border-radius-lg};
    margin: #{$base-spacing-1};
  }
}

// DEVELOPER CHOICE MIXINS - For programmatic scrollbar control
@mixin scrollbar-choice($visible: true) {
  @if $visible {
    @extend .scrollbar-visible;
  } @else {
    @extend .scrollbar-invisible;
  }
}

// Utility classes for Angular component integration
.scrollbar-auto-visible {
  @include scrollbar-choice(true);
}

.scrollbar-auto-invisible {
  @include scrollbar-choice(false);
}

// RESPONSIVE SCROLLBAR UTILITIES
@media (max-width: #{$base-breakpoint-md}) {
  .scrollbar-mobile-invisible {
    // Firefox
    scrollbar-width: none;
    
    // Internet Explorer and Edge
    -ms-overflow-style: none;

    // Webkit browsers (Chrome, Safari, newer Edge)
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }
  
  .scrollbar-mobile-visible {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);

    // Webkit scrollbar styling (Chrome, Safari, Edge)
    &::-webkit-scrollbar {
      width: #{$base-spacing-2}; // 8px
      height: #{$base-spacing-2};
    }

    &::-webkit-scrollbar-track {
      background: var(--scrollbar-track, transparent);
      border-radius: #{$base-border-radius-sm};
    }

    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
      border-radius: #{$base-border-radius-sm};
      border: 1px solid var(--scrollbar-thumb-border, transparent);

      &:hover {
        background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
      }

      &:active {
        background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
      }
    }

    &::-webkit-scrollbar-corner {
      background: var(--scrollbar-corner, transparent);
    }
  }
}

@media (min-width: #{$base-breakpoint-md}) {
  .scrollbar-desktop-invisible {
    // Firefox
    scrollbar-width: none;
    
    // Internet Explorer and Edge
    -ms-overflow-style: none;

    // Webkit browsers (Chrome, Safari, newer Edge)
    &::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }
  }
  
  .scrollbar-desktop-visible {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2)) var(--scrollbar-track, transparent);

    // Webkit scrollbar styling (Chrome, Safari, Edge)
    &::-webkit-scrollbar {
      width: #{$base-spacing-2}; // 8px
      height: #{$base-spacing-2};
    }

    &::-webkit-scrollbar-track {
      background: var(--scrollbar-track, transparent);
      border-radius: #{$base-border-radius-sm};
    }

    &::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb, rgba(0, 0, 0, 0.2));
      border-radius: #{$base-border-radius-sm};
      border: 1px solid var(--scrollbar-thumb-border, transparent);

      &:hover {
        background: var(--scrollbar-thumb-hover, rgba(0, 0, 0, 0.3));
      }

      &:active {
        background: var(--scrollbar-thumb-active, rgba(0, 0, 0, 0.4));
      }
    }

    &::-webkit-scrollbar-corner {
      background: var(--scrollbar-corner, transparent);
    }
  }
}

// ACCESSIBILITY CONSIDERATIONS
.scrollbar-high-contrast {
  --scrollbar-thumb: var(--color-text, #000);
  --scrollbar-thumb-hover: var(--color-text-emphasis, #333);
  --scrollbar-track: var(--color-border, #ccc);
}

.scrollbar-reduced-motion {
  scroll-behavior: auto;
  
  &::-webkit-scrollbar-thumb {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scrollbar-visible,
  .custom-scrollbar {
    scroll-behavior: auto;
    
    &::-webkit-scrollbar-thumb {
      transition: none;
    }
  }
}