@charset "UTF-8";
@use "sass:map";
@use "sass:list";
@use "sass:meta";
@use "sass:math";
// Google Color Palette defined: http://www.google.com/design/spec/style/color.html

$materialize-red: (
  "base":       #e51c23,
  "lighten-5":  #fdeaeb,
  "lighten-4":  #f8c1c3,
  "lighten-3":  #f3989b,
  "lighten-2":  #ee6e73,
  "lighten-1":  #ea454b,
  "darken-1":   #d0181e,
  "darken-2":   #b9151b,
  "darken-3":   #a21318,
  "darken-4":   #8b1014,
);

$red: (
  "base":       #F44336,
  "lighten-5":  #FFEBEE,
  "lighten-4":  #FFCDD2,
  "lighten-3":  #EF9A9A,
  "lighten-2":  #E57373,
  "lighten-1":  #EF5350,
  "darken-1":   #E53935,
  "darken-2":   #D32F2F,
  "darken-3":   #C62828,
  "darken-4":   #B71C1C,
  "accent-1":    #FF8A80,
  "accent-2":    #FF5252,
  "accent-3":    #FF1744,
  "accent-4":    #D50000
);

$pink: (
  "base":       #e91e63,
  "lighten-5":  #fce4ec,
  "lighten-4":  #f8bbd0,
  "lighten-3":  #f48fb1,
  "lighten-2":  #f06292,
  "lighten-1":  #ec407a,
  "darken-1":   #d81b60,
  "darken-2":   #c2185b,
  "darken-3":   #ad1457,
  "darken-4":   #880e4f,
  "accent-1":    #ff80ab,
  "accent-2":    #ff4081,
  "accent-3":    #f50057,
  "accent-4":    #c51162
);

$purple: (
  "base":       #9c27b0,
  "lighten-5":  #f3e5f5,
  "lighten-4":  #e1bee7,
  "lighten-3":  #ce93d8,
  "lighten-2":  #ba68c8,
  "lighten-1":  #ab47bc,
  "darken-1":   #8e24aa,
  "darken-2":   #7b1fa2,
  "darken-3":   #6a1b9a,
  "darken-4":   #4a148c,
  "accent-1":    #ea80fc,
  "accent-2":    #e040fb,
  "accent-3":    #d500f9,
  "accent-4":    #aa00ff
);

$deep-purple: (
  "base":       #673ab7,
  "lighten-5":  #ede7f6,
  "lighten-4":  #d1c4e9,
  "lighten-3":  #b39ddb,
  "lighten-2":  #9575cd,
  "lighten-1":  #7e57c2,
  "darken-1":   #5e35b1,
  "darken-2":   #512da8,
  "darken-3":   #4527a0,
  "darken-4":   #311b92,
  "accent-1":    #b388ff,
  "accent-2":    #7c4dff,
  "accent-3":    #651fff,
  "accent-4":    #6200ea
);

$indigo: (
  "base":       #3f51b5,
  "lighten-5":  #e8eaf6,
  "lighten-4":  #c5cae9,
  "lighten-3":  #9fa8da,
  "lighten-2":  #7986cb,
  "lighten-1":  #5c6bc0,
  "darken-1":   #3949ab,
  "darken-2":   #303f9f,
  "darken-3":   #283593,
  "darken-4":   #1a237e,
  "accent-1":    #8c9eff,
  "accent-2":    #536dfe,
  "accent-3":    #3d5afe,
  "accent-4":    #304ffe
);

$blue: (
  "base":       #2196F3,
  "lighten-5":  #E3F2FD,
  "lighten-4":  #BBDEFB,
  "lighten-3":  #90CAF9,
  "lighten-2":  #64B5F6,
  "lighten-1":  #42A5F5,
  "darken-1":   #1E88E5,
  "darken-2":   #1976D2,
  "darken-3":   #1565C0,
  "darken-4":   #0D47A1,
  "accent-1":    #82B1FF,
  "accent-2":    #448AFF,
  "accent-3":    #2979FF,
  "accent-4":    #2962FF
);

$light-blue: (
  "base":       #03a9f4,
  "lighten-5":  #e1f5fe,
  "lighten-4":  #b3e5fc,
  "lighten-3":  #81d4fa,
  "lighten-2":  #4fc3f7,
  "lighten-1":  #29b6f6,
  "darken-1":   #039be5,
  "darken-2":   #0288d1,
  "darken-3":   #0277bd,
  "darken-4":   #01579b,
  "accent-1":    #80d8ff,
  "accent-2":    #40c4ff,
  "accent-3":    #00b0ff,
  "accent-4":    #0091ea
);

$cyan: (
  "base":       #00bcd4,
  "lighten-5":  #e0f7fa,
  "lighten-4":  #b2ebf2,
  "lighten-3":  #80deea,
  "lighten-2":  #4dd0e1,
  "lighten-1":  #26c6da,
  "darken-1":   #00acc1,
  "darken-2":   #0097a7,
  "darken-3":   #00838f,
  "darken-4":   #006064,
  "accent-1":    #84ffff,
  "accent-2":    #18ffff,
  "accent-3":    #00e5ff,
  "accent-4":    #00b8d4
);

$teal: (
  "base":       #009688,
  "lighten-5":  #e0f2f1,
  "lighten-4":  #b2dfdb,
  "lighten-3":  #80cbc4,
  "lighten-2":  #4db6ac,
  "lighten-1":  #26a69a,
  "darken-1":   #00897b,
  "darken-2":   #00796b,
  "darken-3":   #00695c,
  "darken-4":   #004d40,
  "accent-1":    #a7ffeb,
  "accent-2":    #64ffda,
  "accent-3":    #1de9b6,
  "accent-4":    #00bfa5
);

$green: (
  "base":       #4CAF50,
  "lighten-5":  #E8F5E9,
  "lighten-4":  #C8E6C9,
  "lighten-3":  #A5D6A7,
  "lighten-2":  #81C784,
  "lighten-1":  #66BB6A,
  "darken-1":   #43A047,
  "darken-2":   #388E3C,
  "darken-3":   #2E7D32,
  "darken-4":   #1B5E20,
  "accent-1":    #B9F6CA,
  "accent-2":    #69F0AE,
  "accent-3":    #00E676,
  "accent-4":    #00C853
);

$light-green: (
  "base":       #8bc34a,
  "lighten-5":  #f1f8e9,
  "lighten-4":  #dcedc8,
  "lighten-3":  #c5e1a5,
  "lighten-2":  #aed581,
  "lighten-1":  #9ccc65,
  "darken-1":   #7cb342,
  "darken-2":   #689f38,
  "darken-3":   #558b2f,
  "darken-4":   #33691e,
  "accent-1":    #ccff90,
  "accent-2":    #b2ff59,
  "accent-3":    #76ff03,
  "accent-4":    #64dd17
);

$lime: (
  "base":       #cddc39,
  "lighten-5":  #f9fbe7,
  "lighten-4":  #f0f4c3,
  "lighten-3":  #e6ee9c,
  "lighten-2":  #dce775,
  "lighten-1":  #d4e157,
  "darken-1":   #c0ca33,
  "darken-2":   #afb42b,
  "darken-3":   #9e9d24,
  "darken-4":   #827717,
  "accent-1":    #f4ff81,
  "accent-2":    #eeff41,
  "accent-3":    #c6ff00,
  "accent-4":    #aeea00
);

$yellow: (
  "base":       #ffeb3b,
  "lighten-5":  #fffde7,
  "lighten-4":  #fff9c4,
  "lighten-3":  #fff59d,
  "lighten-2":  #fff176,
  "lighten-1":  #ffee58,
  "darken-1":   #fdd835,
  "darken-2":   #fbc02d,
  "darken-3":   #f9a825,
  "darken-4":   #f57f17,
  "accent-1":    #ffff8d,
  "accent-2":    #ffff00,
  "accent-3":    #ffea00,
  "accent-4":    #ffd600
);

$amber: (
  "base":       #ffc107,
  "lighten-5":  #fff8e1,
  "lighten-4":  #ffecb3,
  "lighten-3":  #ffe082,
  "lighten-2":  #ffd54f,
  "lighten-1":  #ffca28,
  "darken-1":   #ffb300,
  "darken-2":   #ffa000,
  "darken-3":   #ff8f00,
  "darken-4":   #ff6f00,
  "accent-1":    #ffe57f,
  "accent-2":    #ffd740,
  "accent-3":    #ffc400,
  "accent-4":    #ffab00
);

$orange: (
  "base":       #ff9800,
  "lighten-5":  #fff3e0,
  "lighten-4":  #ffe0b2,
  "lighten-3":  #ffcc80,
  "lighten-2":  #ffb74d,
  "lighten-1":  #ffa726,
  "darken-1":   #fb8c00,
  "darken-2":   #f57c00,
  "darken-3":   #ef6c00,
  "darken-4":   #e65100,
  "accent-1":    #ffd180,
  "accent-2":    #ffab40,
  "accent-3":    #ff9100,
  "accent-4":    #ff6d00
);

$deep-orange: (
  "base":       #ff5722,
  "lighten-5":  #fbe9e7,
  "lighten-4":  #ffccbc,
  "lighten-3":  #ffab91,
  "lighten-2":  #ff8a65,
  "lighten-1":  #ff7043,
  "darken-1":   #f4511e,
  "darken-2":   #e64a19,
  "darken-3":   #d84315,
  "darken-4":   #bf360c,
  "accent-1":    #ff9e80,
  "accent-2":    #ff6e40,
  "accent-3":    #ff3d00,
  "accent-4":    #dd2c00
);

$brown: (
  "base":       #795548,
  "lighten-5":  #efebe9,
  "lighten-4":  #d7ccc8,
  "lighten-3":  #bcaaa4,
  "lighten-2":  #a1887f,
  "lighten-1":  #8d6e63,
  "darken-1":   #6d4c41,
  "darken-2":   #5d4037,
  "darken-3":   #4e342e,
  "darken-4":   #3e2723
);

$blue-grey: (
  "base":       #607d8b,
  "lighten-5":  #eceff1,
  "lighten-4":  #cfd8dc,
  "lighten-3":  #b0bec5,
  "lighten-2":  #90a4ae,
  "lighten-1":  #78909c,
  "darken-1":   #546e7a,
  "darken-2":   #455a64,
  "darken-3":   #37474f,
  "darken-4":   #263238
);

$grey: (
  "base":       #9e9e9e,
  "lighten-5":  #fafafa,
  "lighten-4":  #f5f5f5,
  "lighten-3":  #eeeeee,
  "lighten-2":  #e0e0e0,
  "lighten-1":  #bdbdbd,
  "darken-1":   #757575,
  "darken-2":   #616161,
  "darken-3":   #424242,
  "darken-4":   #212121
);

$shades: (
  "black":        #000000,
  "white":        #FFFFFF,
  "transparent":  transparent
);

$gold: (
  "base":       #a68b4d,
  "lighten-5":  #f4f1ea,
  "lighten-4":  #e4dcca,
  "lighten-3":  #d2c5a6,
  "lighten-2":  #c1ae82,
  "lighten-1":  #b29a64,
  "darken-1":   #907943,
  "darken-2":   #746136,
  "darken-3":   #534626,
  "darken-4":   #322a17
);

$colors: (
  "materialize-red": $materialize-red,
  "red": $red,
  "pink": $pink,
  "purple": $purple,
  "deep-purple": $deep-purple,
  "indigo": $indigo,
  "blue": $blue,
  "light-blue": $light-blue,
  "cyan": $cyan,
  "teal": $teal,
  "green": $green,
  "light-green": $light-green,
  "lime": $lime,
  "yellow": $yellow,
  "amber": $amber,
  "orange": $orange,
  "deep-orange": $deep-orange,
  "brown": $brown,
  "blue-grey": $blue-grey,
  "grey": $grey,
  "gold": $gold,
  "shades": $shades
) !default;


// usage: colorFunc("name_of_color", "type_of_color")
// to avoid to repeating map.get($colors, ...)
@function colorFunc($color, $type) {
  @if map.has-key($colors, $color) {
    $curr_color: map.get($colors, $color);
    @if map.has-key($curr_color, $type) {
      @return map.get($curr_color, $type);
    }
  }
  @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
  @return null;
}


// Color Classes
// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_class.scss
// Adds the -border variant (background/text already existed) plus
// .light-mode-*/.dark-mode-* variants below, so a color can be forced
// regardless of the current color-scheme (e.g. an element that should
// always render "the light-mode red" no matter which theme is active).
@each $color_name, $color in $colors {
  @each $color_type, $color_value in $color {
    @if $color_type == "base" {
      .#{$color_name} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text {
        color: $color_value !important;
      }
      .#{$color_name}-border {
        border-color: $color_value !important;
      }

      @media (prefers-color-scheme: light) {
        .light-mode-#{$color_name} {
          background-color: $color_value !important;
        }
        .light-mode-#{$color_name}-text {
          color: $color_value !important;
        }
        .light-mode-#{$color_name}-border {
          border-color: $color_value !important;
        }
      }
      @media (prefers-color-scheme: dark) {
        .dark-mode-#{$color_name} {
          background-color: $color_value !important;
        }
        .dark-mode-#{$color_name}-text {
          color: $color_value !important;
        }
        .dark-mode-#{$color_name}-border {
          border-color: $color_value !important;
        }
      }
    }
    @else if $color_name != "shades" {
      .#{$color_name}.#{$color_type} {
        background-color: $color_value !important;
      }
      .#{$color_name}-text.text-#{$color_type} {
        color: $color_value !important;
      }
      .#{$color_name}-border.border-#{$color_type} {
        border-color: $color_value !important;
      }

      @media (prefers-color-scheme: light) {
        .light-mode-#{$color_name}.#{$color_type}-light-mode {
          background-color: $color_value !important;
        }
        .light-mode-#{$color_name}-text.text-#{$color_type}-light-mode {
          color: $color_value !important;
        }
        .light-mode-#{$color_name}-border.border-#{$color_type}-light-mode {
          border-color: $color_value !important;
        }
      }
      @media (prefers-color-scheme: dark) {
        .dark-mode-#{$color_name}.#{$color_type}-dark-mode {
          background-color: $color_value !important;
        }
        .dark-mode-#{$color_name}-text.text-#{$color_type}-dark-mode {
          color: $color_value !important;
        }
        .dark-mode-#{$color_name}-border.border-#{$color_type}-dark-mode {
          border-color: $color_value !important;
        }
      }
    }
  }
}

// Shade classes
// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_class.scss
@each $color, $color_value in $shades {
  .#{$color} {
    background-color: $color_value !important;
  }
  .#{$color}-text {
    color: $color_value !important;
  }
  .#{$color}-border {
    border-color: $color_value !important;
  }

  @media (prefers-color-scheme: light) {
    .light-mode-#{$color} {
      background-color: $color_value !important;
    }
    .light-mode-#{$color}-text {
      color: $color_value !important;
    }
    .light-mode-#{$color}-border {
      border-color: $color_value !important;
    }
  }
  @media (prefers-color-scheme: dark) {
    .dark-mode-#{$color} {
      background-color: $color_value !important;
    }
    .dark-mode-#{$color}-text {
      color: $color_value !important;
    }
    .dark-mode-#{$color}-border {
      border-color: $color_value !important;
    }
  }
}

/// Gradients
///////////////////////////////////////////////////////
///

// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_class.scss (angle/direction helpers + linear-gradient mixin)
// Convert an angle between units. @author Chris Eppstein
@function convert-angle($value, $unit) {
  $convertable-units: deg grad turn rad;
  $conversion-factors: 1 (10grad/9deg) (1turn/360deg) (3.1415926rad/180deg);

  @if list.index($convertable-units, math.unit($value)) and list.index($convertable-units, $unit) {
    @return $value / list.nth($conversion-factors, list.index($convertable-units, math.unit($value))) * list.nth($conversion-factors, list.index($convertable-units, $unit));
  }

  @warn "Cannot convert `#{math.unit($value)}` to `#{$unit}`.";
}

// Is `$value` a direction keyword or an angle?
@function is-direction($value) {
  $is-direction: list.index((to top, to top right, to right top, to right, to bottom right, to right bottom, to bottom, to bottom left, to left bottom, to left, to left top, to top left), $value);
  $is-angle: meta.type-of($value) == 'number' and list.index('deg' 'grad' 'turn' 'rad', math.unit($value));

  @return $is-direction or $is-angle;
}

// Prints a linear-gradient with a plain color fallback (the gradient's own
// start color, so something reasonable still shows if gradients aren't
// supported) ahead of the real `linear-gradient()` declaration.
@mixin linear-gradient($direction, $color-stops...) {
  @if is-direction($direction) == false {
    $color-stops: ($direction, $color-stops);
    $direction: 180deg;
  }

  background: list.nth(list.nth($color-stops, 1), 1);
  background: linear-gradient($direction, $color-stops);
}

// @implement /Users/kzarshenas/Sites/CrazyProject/CrazyPHP/resources/Scss/style/color_gradient_collection.scss
// 30 ready-made two-color gradients, each built from the palette above via
// colorFunc() so they stay in sync if a palette color ever changes.
$gradient-colors: (
  gradient-45deg-light-blue-teal: ('start-color': colorFunc("light-blue", "lighten-4"), 'end-color': colorFunc("teal", "accent-2"), 'direction': 45deg),
  gradient-45deg-indigo-light-blue: ('start-color': colorFunc("indigo", "darken-1"), 'end-color': colorFunc("light-blue", "lighten-2"), 'direction': 45deg),
  gradient-45deg-light-blue-indigo: ('start-color': colorFunc("light-blue", "lighten-4"), 'end-color': colorFunc("indigo", "lighten-3"), 'direction': 45deg),
  gradient-45deg-yellow-green: ('start-color': colorFunc("yellow", "accent-1"), 'end-color': colorFunc("green", "accent-1"), 'direction': 45deg),
  gradient-45deg-orange-deep-orange: ('start-color': colorFunc("orange", "lighten-4"), 'end-color': colorFunc("deep-orange", "lighten-4"), 'direction': 45deg),
  gradient-45deg-deep-purple-purple: ('start-color': colorFunc("deep-purple", "lighten-4"), 'end-color': colorFunc("purple", "lighten-5"), 'direction': 45deg),
  gradient-45deg-red-pink: ('start-color': colorFunc("red", "accent-2"), 'end-color': colorFunc("pink", "lighten-3"), 'direction': 45deg),
  gradient-45deg-light-green-amber: ('start-color': colorFunc("light-green", "lighten-3"), 'end-color': colorFunc("amber", "lighten-5"), 'direction': 45deg),
  gradient-45deg-amber-amber: ('start-color': colorFunc("amber", "darken-4"), 'end-color': colorFunc("amber", "lighten-1"), 'direction': 45deg),
  gradient-45deg-purple-pink: ('start-color': colorFunc("purple", "accent-1"), 'end-color': colorFunc("pink", "lighten-5"), 'direction': 45deg),
  gradient-45deg-teal-cyan: ('start-color': colorFunc("teal", "lighten-5"), 'end-color': colorFunc("cyan", "accent-3"), 'direction': 45deg),
  gradient-45deg-blue-grey-blue-grey: ('start-color': colorFunc("blue-grey", "lighten-4"), 'end-color': colorFunc("blue-grey", "darken-1"), 'direction': 45deg),
  gradient-45deg-orange-amber: ('start-color': colorFunc("orange", "darken-4"), 'end-color': colorFunc("blue", "darken-2"), 'direction': 45deg),
  gradient-45deg-indigo-blue: ('start-color': colorFunc("indigo", "darken-2"), 'end-color': colorFunc("blue", "darken-2"), 'direction': 45deg),
  gradient-45deg-brown-brown: ('start-color': colorFunc("brown", "darken-1"), 'end-color': colorFunc("blue", "lighten-4"), 'direction': 45deg),
  gradient-45deg-blue-grey-blue: ('start-color': colorFunc("blue-grey", "darken-4"), 'end-color': colorFunc("blue", "accent-3"), 'direction': 45deg),
  gradient-45deg-purple-deep-orange: ('start-color': colorFunc("purple", "darken-1"), 'end-color': colorFunc("deep-orange", "accent-2"), 'direction': 45deg),
  gradient-45deg-green-teal: ('start-color': colorFunc("green", "darken-1"), 'end-color': colorFunc("teal", "accent-3"), 'direction': 45deg),
  gradient-45deg-purple-light-blue: ('start-color': colorFunc("purple", "accent-2"), 'end-color': colorFunc("light-blue", "lighten-2"), 'direction': 45deg),
  gradient-45deg-cyan-cyan: ('start-color': colorFunc("cyan", "accent-2"), 'end-color': colorFunc("cyan", "accent-3"), 'direction': 45deg),
  gradient-45deg-yellow-teal: ('start-color': colorFunc("yellow", "lighten-4"), 'end-color': colorFunc("teal", "accent-2"), 'direction': 45deg),
  gradient-45deg-purple-deep-purple: ('start-color': colorFunc("purple", "darken-2"), 'end-color': colorFunc("deep-purple", "accent-2"), 'direction': 45deg),
  gradient-45deg-cyan-light-green: ('start-color': colorFunc("cyan", "darken-2"), 'end-color': colorFunc("light-green", "accent-2"), 'direction': 45deg),
  gradient-45deg-purple-amber: ('start-color': colorFunc("purple", "accent-3"), 'end-color': colorFunc("amber", "darken-2"), 'direction': 45deg),
  gradient-45deg-indigo-purple: ('start-color': colorFunc("indigo", "darken-2"), 'end-color': colorFunc("purple", "darken-2"), 'direction': 45deg),
  gradient-45deg-deep-purple-blue: ('start-color': colorFunc("deep-purple", "accent-4"), 'end-color': colorFunc("blue", "darken-2"), 'direction': 45deg),
  gradient-45deg-deep-orange-orange: ('start-color': colorFunc("deep-orange", "darken-4"), 'end-color': colorFunc("orange", "darken-2"), 'direction': 45deg),
  gradient-45deg-light-blue-cyan: ('start-color': colorFunc("light-blue", "darken-2"), 'end-color': colorFunc("cyan", "lighten-1"), 'direction': 45deg),
  gradient-45deg-blue-indigo: ('start-color': colorFunc("blue", "accent-4"), 'end-color': colorFunc("indigo", "darken-1"), 'direction': 45deg),
  gradient-45deg-semi-dark: ('start-color': #00aeff, 'end-color': #3369e6, 'direction': -90deg),
) !default;

@each $gcolor_name, $gcolor in $gradient-colors {
  $start-color: map.get($gcolor, start-color);
  $end-color: map.get($gcolor, end-color);
  $direction: map.get($gcolor, direction);

  .#{$gcolor_name} {
    @include linear-gradient($direction, $start-color, $end-color);

    // Drop shadow tinted to match the gradient's end color, for a
    // raised/glowing look instead of a flat generic shadow.
    &.gradient-shadow {
      box-shadow: 0 6px 20px 0 rgba($end-color, 0.5) !important;
    }
  }

  // Standalone version of the same shadow: doesn't require the matching
  // .#{$gcolor_name} background class, so it can be dropped onto any
  // element (e.g. a plain card, a button) that just wants the tinted
  // glow without the actual gradient fill.
  .#{$gcolor_name}-shadow {
    box-shadow: 0 6px 20px 0 rgba($end-color, 0.5) !important;
  }
}