@use "sass:map";
@use "sass:math";
@use "sass:color";

$breakpoints: (
        'xs': 320px,
        'sm': 576px,
        'md': 768px,
        'lg': 992px,
        'xl': 1200px,
        'xxl': 1440px,
);

// Option to specify if the query should be a container query
@mixin respond-above($breakpoint, $container-query: false) {
  @if map.has-key($breakpoints, $breakpoint) {
    $value: map.get($breakpoints, $breakpoint);

    @if $container-query {
      // Use container query
      @container (min-width: #{$value}) {
        @content;
      }
    } @else {
      // Use media query
      @media (min-width: $value) {
        @content;
      }
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}.";
  }
}

// Option to specify if the query should be a container query
@mixin respond-below($breakpoint, $container-query: false) {
  @if map.has-key($breakpoints, $breakpoint) {
    $value: map.get($breakpoints, $breakpoint) - 1px;

    @if $container-query {
      // Use container query
      @container (max-width: #{$value}) {
        @content;
      }
    } @else {
      // Use media query
      @media (max-width: $value) {
        @content;
      }
    }
  } @else {
    @warn "Unknown breakpoint: #{$breakpoint}.";
  }
}

@mixin ellipsis() {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  word-wrap: normal;
}

@mixin scrollbar() {
  scrollbar-width: thin;
  scrollbar-color: var(--hi-scrollbar-thumb) transparent;

  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    border: 3px solid transparent;
  }

  &:hover::-webkit-scrollbar-thumb {
    background-color: var(--hi-scrollbar-thumb);
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }
}

@function luminance($color) {
  $red: color.red($color) / 255;
  $green: color.green($color) / 255;
  $blue: color.blue($color) / 255;
  
  // Apply gamma correction
  $red: if($red <= 0.03928, $red / 12.92, math.pow(($red + 0.055) / 1.055, 2.4));
  $green: if($green <= 0.03928, $green / 12.92, math.pow(($green + 0.055) / 1.055, 2.4));
  $blue: if($blue <= 0.03928, $blue / 12.92, math.pow(($blue + 0.055) / 1.055, 2.4));
  
  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

@function contrast-color($bg-color) {
  @if luminance($bg-color) > 0.5 {
    @return #000000;
  } @else {
    @return #ffffff;
  }
}

@function get-contrast-color($bg-color) {
  $lightness: color.lightness($bg-color);
  
  @if $lightness > 50% {
    @return #000000; // Dark text for light backgrounds
  } @else {
    @return #ffffff; // Light text for dark backgrounds
  }
}
