@use 'sass:color';
@use 'sass:string';
@use 'sass:list';
@use 'assets';

@mixin platinumWindowBoxShadow {
  box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
  inset var(--window-border-size) var(--window-border-size) var(--color-window-border-outset),
  var(--window-border-size) var(--window-border-size) 0 0 var(--color-black);
}

@mixin platinumBoxShadow {
  box-shadow: inset var(--window-border-size) var(--window-border-size) var(--color-system-05),
  var(--window-border-size) var(--window-border-size) var(--color-window-border-outset);
}

@mixin platinumWindowBorder {
  border: var(--window-border-size) solid var(--color-window-border);
  @include platinumWindowBoxShadow;
}

@mixin platinumWindowHeaderBorder {
  border: var(--window-border-size) solid var(--color-system-07);
  border-bottom: var(--window-border-size) solid var(--color-system-05);
  @include platinumWindowBoxShadow;
  box-shadow: inset var(--window-border-size) var(--window-border-size) var(--color-window-border-outset);
}

@mixin platinumWindowHeaderBorderDepressed {
  box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-03),
    inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-05),
    calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-06);
  border-bottom: calc(var(--window-border-size) * 1) solid var(--color-black);
  color: var(--color-black);
}

@mixin platinumWindowInnerBoxShadow {
  box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
  calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-window-border-outset);
}

@mixin platinumWindowInnerBoxShadowOuter {
  box-shadow: calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05);
}


@mixin platinumWindowInnerBorder {
  border: var(--window-border-size) solid var(--color-window-border);
  @include platinumWindowInnerBoxShadow;
}

@mixin platinumWindowControlBoxBorder {
  box-shadow: inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-03),
  inset calc((var(--window-border-size)) * -1) calc((var(--window-border-size)) * -1) 0 0 var(--color-system-05);
  border: var(--window-border-size) solid var(--color-black);
}

@mixin platinumWindowControlBox {
  width: calc(var(--window-control-size)) !important;
  height: calc(var(--window-control-size)) !important;
  background: linear-gradient(135deg, var(--color-system-05), var(--color-white) 80%);

  &:before {
    display: block;
    width: 100%;
    height: 100%;
    background-image: assets.$corner-dither;
    background-repeat: no-repeat;
    background-size: cover;
    mix-blend-mode: luminosity;
    opacity: 0.25;
    content: ' ';
  }
}

@mixin platinumWindowControlBoxDepressable {
  @include platinumWindowControlBox;
  @include platinumWindowControlBoxBorder;
  &:active {
    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-07),
    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05);
    background: linear-gradient(135deg, var(--color-system-06), var(--color-system-05));
  }
  &:after {
    position: relative;
    top: calc((var(--window-control-size) * -1) - var(--window-border-size));
    display: block;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    content: ' ';
  }
}

@mixin platinumWindowUndepressable {
  box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
  inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-04),
  inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-04),
  inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-white);
  background-color: var(--color-system-02);
  border: var(--window-border-size) solid var(--color-black);
  border-radius: var(--window-padding-size);
}

@mixin platinumWindowDepressable {
  @include platinumWindowUndepressable;
  &:active {
    box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
    inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-06),
    inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-07),
    inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-system-06);
    background-color: var(--color-system-05);
    color: var(--color-white);
  }

  &:disabled {
    box-shadow: none;
    background-color: var(--color-system-03);
    border-color: var(--color-system-05);
    color: var(--color-system-05);

    * {
      color: var(--color-system-05);
    }
  }
}

@mixin platinumWindowDepressed {
  border-radius: var(--window-padding-size);
  box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-05),
  inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-06),
  inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-07),
  inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-system-06);
  background-color: var(--color-system-05);
  color: var(--color-white);
}

@mixin platinumDepressableDefault {
  @include platinumWindowDepressable;
  box-shadow: 0 0 0 var(--window-border-size) var(--color-system-04),
  0 0 0 calc(var(--window-border-size) * 2) var(--color-system-02),
  0 0 0 calc(var(--window-border-size) * 3) var(--color-black),
  inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 0 var(--color-system-05),
  inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-06);

  &:active {
    @include platinumDepressableBoxShadowActive;
  }
}

@mixin platinumDepressableBoxShadowActive {
  box-shadow: inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) var(--color-system-07),
  inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) var(--color-system-06),
  inset calc(var(--window-border-size) * 1) calc(var(--window-border-size) * 1) var(--color-system-07),
  inset calc(var(--window-border-size) * 2) calc(var(--window-border-size) * 2) var(--color-system-06),
  0 0 0 var(--window-border-size) var(--color-system-04),
  0 0 0 calc(var(--window-border-size) * 2) var(--color-black),
  inset calc(var(--window-border-size) * -2) calc(var(--window-border-size) * -2) 0 0 var(--color-system-05),
  inset var(--window-border-size) var(--window-border-size) 0 0 var(--color-system-06);
}

@function encode-color($string) {
  $hex: string.slice(color.ie-hex-str($string), 4);
  $string: string.unquote('#{$hex}');
  $string: '%23' + $string;
  @return $string;
}

@mixin theme-halftone($thisColor, $size: 5%) {
  $thisColor: encode-color($thisColor);
  background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2.8 2.8" xml:space="preserve"><path fill="' + $thisColor + '" d="M1,1.2H0.5C0.3,1.2,0.2,1.2,0.2,1V0.5c0-0.1,0.1-0.2,0.2-0.2H1c0.1,0,0.2,0.1,0.2,0.2V1C1.2,1.2,1.2,1.2,1,1.2z"/><path fill="' + $thisColor + '" d="M2.3,2.5H1.7c-0.1,0-0.2-0.1-0.2-0.2V1.7c0-0.1,0.1-0.2,0.2-0.2h0.6c0.1,0,0.2,0.1,0.2,0.2v0.6C2.5,2.4,2.4,2.5,2.3,2.5z"/></svg>') !important;
  background-repeat: repeat;
  background-size: $size;
}

@mixin no-select {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.hidden {
  visibility: hidden;
}