// Define your breakpoints
$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

// Mixin for min-width (mobile-first)
@mixin media-up($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
    @if $value == 0 {
      @content;
    } @else {
      @media (min-width: $value) {
        @content;
      }
    }
  }
}

// Mixin for max-width (desktop-first)
@mixin media-down($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    $value: map-get($breakpoints, $breakpoint);
    @media (max-width: #{$value - 1px}) {
      @content;
    }
  }
}

// Generate utility classes
@each $breakpoint, $value in $breakpoints {
  // Hidden at this breakpoint and up
  .hidden-#{$breakpoint}-up {
    @include media-up($breakpoint) {
      display: none !important;
    }
  }

  // Hidden at this breakpoint and down
  .hidden-#{$breakpoint}-down {
    @include media-down($breakpoint) {
      display: none !important;
    }
  }

  // Visible only at this breakpoint
  .visible-#{$breakpoint}-only {
    display: none !important;
    @include media-up($breakpoint) {
      @if $breakpoint != xxl {
        @include media-down($breakpoint) {
          display: block !important;
        }
      } @else {
        display: block !important;
      }
    }
  }
}

@mixin scrollbar-custom(
  $color: greenyellow,
  $width: 8px,
  $track-bg: transparent
) {
  scrollbar-color: $color $track-bg;
  scrollbar-width: thin;

  &::-webkit-scrollbar {
    width: $width;
  }

  &::-webkit-scrollbar-track {
    background: $track-bg;
  }

  &::-webkit-scrollbar-thumb {
    background-color: $color;
    border-radius: calc($width / 2);
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: darken($color, 10%);
  }
}

// Usage
.scrollable-child {
  @include scrollbar-custom(greenyellow, 10px);
}