@use '@angular/material' as mat;
@use 'sass:math' as math;
@use 'sass:map' as map;
@use '../functions' as *;
@use 'theme' as theme;
@use 'variables' as variables;

@mixin all-vars {
  $hex: 15;
  $darkest-l: 100%;
  $lightest-l: 25%;
  $shade-diff-l: math.div(($lightest-l - $darkest-l), $hex);

  --_body-hue: 200deg;
  --_body-saturation: 12%;
  --_body-lightness: 95%;
  --_shadow-saturation: 40%;
  --_shadow-lightness: 30%;
  --_shade-diff-l: #{$shade-diff-l};

  // contrast lightness variables
  --lightness-0: #{$darkest-l};
  --lightness-50: 94%;
  --lightness-300: 66%;
  --lightness-500: 52%;
  --lightness-700: 43%;
  --lightness-900: 29%;
  --lightness-1000: #{$lightest-l};

  // Gray Colors
  @for $i from 0 through $hex {
    $hex-digit: get-hex-number($i);
    $name: --#{$hex-digit}#{$hex-digit}#{$hex-digit}; // --fff
    // prettier-ignore
    #{$name}: hsl(var(--_body-hue) var(--_body-saturation) calc(var(--_shade-diff-l) * #{($hex - $i)} + var(--lightness-0)));
  }
  // prettier-ignore
  --f9f9f9: hsl(var(--_body-hue) var(--_body-saturation) calc(var(--_shade-diff-l) / 4 + var(--lightness-0)));

  --light-border-color: var(--ddd);
  --box-radius: 4px;

  // Backward compatibility for gray colors
  --gray-50: var(--eee);
  --gray-300: var(--bbb);
  --gray-500: var(--888);
  --gray-700: var(--555);

  // body colors
  --toolbar-height: 64px;
  --body-bg: hsl(var(--_body-hue) var(--_body-saturation) var(--_body-lightness));
  --body-color: hsl(0deg 0% var(--lightness-1000));

  // Shadows
  --shadow: #{variables.$shadow};
  --shadow-lg: #{variables.$shadow-lg};
  --shadow-sm: #{variables.$shadow-sm};

  // Fonts
  --font-monospace: monospace, sans-serif, ui-monospace, system-ui;
  --font-family: dana, tahoma, sans-serif;
  @include supports-font-variables {
    --font-family: 'dana', tahoma, sans-serif;
  }

  // Sidebar
  --mat-sidenav-container-width: 16rem;
  --short-side-nav-width: 5rem;

  // mat-tab
  --mat-tab-header-margin-bottom: 1rem;
  --mat-tab-header-divider-color: var(--mat-divider-color);
  --mat-tab-header-divider-height: 1px;

  --disabled-day-background: repeating-linear-gradient(
    -45deg,
    rgb(255 255 255),
    rgb(255 255 255) 3px,
    rgb(215 215 215 / 90%) 0,
    rgb(215 215 215 / 90%) 6px
  );
}

@mixin dark-vars {
  $darkest-l: 18%;
  $lightest-l: 88%;
  $shade-diff-l: math.div(($lightest-l - $darkest-l), 15);

  --_shade-diff-l: #{$shade-diff-l};
  --_body-saturation: 6%;
  --_body-lightness: 10%;
  --_shadow-saturation: 8%;
  --_shadow-lightness: 8%;

  --lightness-0: #{$darkest-l};
  --lightness-50: 25%;
  --lightness-300: 45%;
  --lightness-500: 70%;
  --lightness-700: 80%;
  --lightness-900: 90%;
  --lightness-1000: #{$lightest-l};
}

@mixin produce-vars {
  @at-root html &,
    & [dark='false'] {
    @include all-vars;
  }
  @at-root html[dark='true'] &,
    & [dark='true'] {
    @include all-vars;
    @include dark-vars;
  }
}