@use 'sass:color';
@use 'sass:list';
@use 'sass:math';
@use 'sass:map';
@use '../theme.scss' as *;

:root {
  --bgc: #{map.get($grays, 'gray-0')};
  --txt: #{map.get($grays, 'gray-95')};
  --txt-light: #{map.get($grays, 'gray-85')};
  --brd: #{map.get($grays, 'gray-20')};

  --suf: #{map.get($grays, 'gray-5')};
  --hover-suf: #{map.get($grays, 'gray-10')};

  --base-color: #{map.get($grays, 'gray-5')};
  --base-hover-color: #{map.get($grays, 'gray-10')};

  --primary: #{$primary};
  --secondary: #{$secondary};

  --success: #{$success};
  --info: #{$info};
  --error: #{$danger};
  --warning: #{$attention};
  --importance: #{$importance};

  --depth-bg: #{map.get($grays, 'gray-0')};
  --depth-bs: 0 0 8px 5px rgba(0, 0, 0, 0.16);

  --mobile-p: #{map.get($breakpoints, 'xs')};
  --mobile-l: #{map.get($breakpoints, 'sm')};
  --tablet: #{map.get($breakpoints, 'md')};
  --desktop: #{map.get($breakpoints, 'lg')};
  --desktop-l: #{map.get($breakpoints, 'xl')};
}

// @media (prefers-color-scheme: dark) {
// }
// :root {
//   &.dark {
//     --bgc: #{map.get($grays, 'gray-95')};
//     --txt: #{map.get($grays, 'gray-5')};
//     --txt-light: #{map.get($grays, 'gray-10')};
//     --brd: #{map.get($grays, 'gray-70')};

//     --suf: #{map.get($grays, 'gray-40')};
//     --hover-suf: #{map.get($grays, 'gray-50')};

//     --base-color: #{map.get($grays, 'gray-80')};
//     --base-hover-color: #{map.get($grays, 'gray-70')};

//     --depth-bg: color-mix(
//       in oklab,
//       #{map.get($grays, 'gray-95')},
//       rgba(0, 0, 0, 0.04)
//     );
//     --depth-bs: none;
//     // --depth-bg: #{color.adjust(map.get($grays, 'gray-85'), $alpha: -0.4)};
//   }
// }
@media (prefers-color-scheme: dark) {
  :root.use-theme {
    --bgc: #{map.get($grays, 'gray-95')};
    --txt: #{map.get($grays, 'gray-0')};
    --txt-light: #{map.get($grays, 'gray-10')};
    --brd: #{map.get($grays, 'gray-85')};

    --suf: #{map.get($grays, 'gray-90')};
    --hover-suf: #{map.get($grays, 'gray-90')};

    --base-color: #{map.get($grays, 'gray-80')};
    --base-hover-color: #{map.get($grays, 'gray-70')};

    --depth-bg: color-mix(
      in oklab,
      #{map.get($grays, 'gray-95')},
      rgba(0, 0, 0, 0.04)
    );
    // --depth-bg: color-mix(in oklab, #{map.get($grays, 'gray-100')}, rgba(255, 255, 255, 0.04));
    // --depth-bg: #{map.get($grays, 'gray-80')};
    // --depth-bg: rgba(0, 0, 0, 0.2);
    --depth-bs: none;
  }
}
:root.light-mode {
  --bgc: #{map.get($grays, 'gray-0')};
  --txt: #{map.get($grays, 'gray-95')};
  --txt-light: #{map.get($grays, 'gray-85')};
  --brd: #{map.get($grays, 'gray-15')};
  --suf: #{map.get($grays, 'gray-5')};
  --hover-suf: #{map.get($grays, 'gray-10')};

  --base-color: #{map.get($grays, 'gray-10')};
  --base-hover-color: #{map.get($grays, 'gray-15')};

  --depth-bg: #{map.get($grays, 'gray-0')};
  --depth-bs: 0 1px 8px 1px rgba(0, 0, 0, 0.16);
}

:root.dark-mode {
  --bgc: #{map.get($grays, 'gray-95')};
  --txt: #{map.get($grays, 'gray-0')};
  --txt-light: #{map.get($grays, 'gray-10')};
  --brd: #{map.get($grays, 'gray-85')};
  --suf: #{map.get($grays, 'gray-90')};
  --hover-suf: #{map.get($grays, 'gray-85')};

  --base-color: #{map.get($grays, 'gray-80')};
  --base-hover-color: #{map.get($grays, 'gray-70')};

  --depth-bg: color-mix(
    in oklab,
    #{map.get($grays, 'gray-95')},
    rgba(0, 0, 0, 0.04)
  );
  --depth-bs: 0 0 0 1px rgba(0, 0, 0, 0.16);
}

@each $color, $value in $stateColors {
  $lightValue: color.adjust(list.nth($value, 1), $lightness: 35%);
  :root {
    --be-#{$color}-color: #{$value};
    --be-#{$color}-light: #{$lightValue};
  }
}
@each $color, $value in $colors {
  $lightValue: color.adjust(list.nth($value, 1), $lightness: 35%);
  :root {
    --be-#{$color}-color: #{$value};
    --be-#{$color}-light: #{$lightValue};
  }
}
// @each $color, $value in $colors2 {
//   $lightValue: color.adjust(list.nth( $value, 1), $lightness: 35%);
//   :root {
//     --be-#{$color}-sub-color:  #{$value};
//     --be-#{$color}-sub-light:  #{$lightValue};
//   }
// }

@function color-contrast($bg, $fg) {
  $luminance1: luminance($fg) + 0.05;
  $luminance2: luminance($bg) + 0.05;
  $ratio: $luminance1 / $luminance2;

  @if $luminance2 > $luminance1 {
    $ratio: 1 / $ratio;
  }

  $ratio: math.round($ratio * 100) / 100;

  @return $ratio;
}

@function check-contrast($bg, $fg, $account) {
  @debug $account;
  $result: color-contrast($bg, $fg) < $account;
  @debug $result;
  @return $result;
}

@function luminance($color) {
  $red: list.nth(linear-rgb($color), 1);
  $green: list.nth(linear-rgb($color), 2);
  $blue: list.nth(linear-rgb($color), 3);

  @return 0.2126 * $red + 0.7152 * $green + 0.0722 * $blue;
}

@function linear-rgb($color) {
  $r: color.red($color) / 255;
  $g: color.green($color) / 255;
  $b: color.blue($color) / 255;

  $r: if($r <= 0.03928, $r / 12.92, pow(($r + 0.055) / 1.055, 2.4));
  $g: if($g <= 0.03928, $g / 12.92, pow(($g + 0.055) / 1.055, 2.4));
  $b: if($b <= 0.03928, $b / 12.92, pow(($b + 0.055) / 1.055, 2.4));

  @return ($r, $g, $b);
}