// ============================================================================
// 02-TOOLS -> MIXINS -> #SCROLLBAR
// ============================================================================

/// Scroll bar
///
/// Applies scrollbar styling to an element.
/// 
/// @example scss
///   .class-name {
///     @include scrollbar;
///   }
/// 
/// @access public

@mixin scrollbar() {
    &::-webkit-scrollbar {
        background-color: var(--scrollbar-bg);
        border-radius: var(--rounded-md);
        width: var(--space-2);
    }
      
    &::-webkit-scrollbar-track {
        background-color: transparent;
    }
      
    &::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb-bg);
        border-radius: var(--rounded-sm);
        border: calc(var(--space-1) / 2) solid var(--scrollbar-bg);
    }
      
    &::-webkit-scrollbar-thumb:hover {
        background-color: var(--scrollbar-thumb-hover-bg);
    }
}