@use "sass:string";

@mixin global-container($padding-block: 0) {
  width: 100%;
  height: 100%;
  max-width: max-w(global);
  margin: 0 auto;
  padding: $padding-block spacer(4);

  @include breakpoint(medium) {
    padding: $padding-block spacer(6);
  }
}

@mixin global-grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-column-count), minmax(0, 1fr));
  column-gap: grid-gutter();
  width: 100%;
  max-width: max-w(global);
  margin: 0 auto;
  padding: 0 grid-margin();
}

@mixin grid(
  $cols: var(--grid-column-count),
  $rows: null,
  $gap: null,
  $row-gap: null,
  $column-gap: null,
  $align-items: stretch,
  $justify-items: stretch,
  $justify-content: stretch
) {
  display: grid;
  grid-template-columns: repeat($cols, minmax(0, 1fr));
  grid-template-rows: repeat($rows, minmax(0, 1fr));
  gap: $gap;
  grid-gap: $gap;
  row-gap: $row-gap;
  column-gap: $column-gap;
  align-items: $align-items;
  justify-items: $justify-items;
  justify-content: $justify-content;
}

@mixin flex(
  $direction: row,
  $justify-content: center,
  $align-items: center,
  $gap: null,
  $wrap: nowrap
) {
  display: flex;
  flex-direction: $direction;
  flex-wrap: $wrap;
  gap: $gap;
  justify-content: $justify-content;
  align-items: $align-items;
}

@mixin center {
  justify-content: center;
  align-items: center;
  justify-items: center;
}

@mixin hide-scrollbar {
  // Chrome, Safari and Opera
  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
  -ms-overflow-style: none; // IE and Edge
  scrollbar-width: none; // Firefox
}

@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@mixin full-bleed {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

@mixin fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

@mixin offscreen {
  position: absolute;
  visibility: hidden;
  pointer-events: none;
}

@mixin outer-border-radius($inner-radius, $distance) {
  border-radius: calc($inner-radius + $distance);
}

@mixin inner-border-radius($outer-radius, $distance) {
  border-radius: calc($outer-radius - $distance);
}

@mixin outer-rounded($inner-radius-name, $distance) {
  $inner-radius: rounded($inner-radius-name);
  @include outer-border-radius($inner-radius, $distance);
}

@mixin inner-rounded($outer-radius-name, $distance) {
  $outer-radius: rounded($outer-radius-name);
  @include inner-border-radius($outer-radius, $distance);
}

@mixin expand-hitbox($spacer) {
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: calc(#{$spacer} * -1);
    right: calc(#{$spacer} * -1);
    bottom: calc(#{$spacer} * -1);
    left: calc(#{$spacer} * -1);
    z-index: z(1);
  }
}

@mixin debug(
  $text: null,
  $color: debug,
  $top: null,
  $left: null,
  $bottom: null,
  $right: null
) {
  border: 1px solid color($color) !important;

  &::after {
    @include debug-label($color, $top, $left, $bottom, $right);

    @if $text != null {
      content: quote($text);
    }
  }
}

@mixin debug-label(
  $color: debug,
  $top: null,
  $left: null,
  $bottom: null,
  $right: null
) {
  @include type-item(code);
  font-size: 1rem;
  background-color: color($color) !important;
  color: color(black);
  width: fit-content;
  height: fit-content;
  padding-inline: spacer(1);
  position: absolute;
  top: $top;
  left: $left;
  bottom: $bottom;
  right: $right;
  pointer-events: none;
  user-select: none;

  @if $top == null and $left == null and $bottom == null and $right == null {
    top: 0;
    left: 0;
  }
}

@mixin transition(
  $property: null,
  $duration: 0.3s,
  $easing: in-out-cubic,
  $delay: 0s
) {
  transition-property: unquote($property);
  transition-duration: $duration;
  transition-timing-function: easing($easing);
  transition-delay: $delay;
  -webkit-transition-property: $property;
  -webkit-transition-duration: $duration;
  -webkit-transition-timing-function: easing($easing);
}

@mixin transition-all($properties) {
  $transitions: ();
  $default-duration: 0.3s;
  $default-easing: in-out-cubic;
  $default-delay: 0s;

  @each $property, $values in $properties {
    $duration: map-get($values, duration);
    $easing: map-get($values, easing);
    $delay: map-get($values, delay);

    $duration: if($duration, $duration, $default-duration);
    $easing: if($easing, $easing, $default-easing);
    $delay: if($delay, $delay, $default-delay);

    $transitions: append(
      $transitions,
      $property $duration easing($easing) $delay,
      comma
    );
  }

  transition: $transitions;
  -webkit-transition: $transitions;
}

@mixin animation(
  $name: null,
  $duration: 0.3s,
  $easing: in-out-quart,
  $delay: 0s,
  $repeat: 1,
  $direction: normal,
  $fill-mode: both
) {
  animation-name: unquote($name);
  animation-duration: $duration;
  animation-timing-function: easing($easing);
  animation-delay: $delay;
  animation-iteration-count: $repeat;
  animation-direction: $direction;
  animation-fill-mode: $fill-mode;
}

@mixin icon-group {
  display: grid;
  place-items: center;

  .icon {
    @include transition-all(
      (
        opacity: (
          duration: 0.1s,
        ),
        transform: (
          duration: 0.3s,
        ),
      )
    );
    grid-column: 1;
    grid-row: 1;
    opacity: 0;
    transform: scale(0.9);
    will-change: opacity, transform;

    &.visible {
      opacity: 1;
      transform: scale(1);
    }
  }
}

@mixin inherit-type {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  font-weight: inherit;
  text-transform: inherit;
  font-style: inherit;
  text-decoration: inherit;
}

@mixin inherit-theme {
  background-color: inherit;
  color: inherit;
}

@mixin type-item($type-name, $style: normal) {
  font-family: font-family($type-name);
  font-size: font-size($type-name);
  line-height: line-height($type-name);
  letter-spacing: letter-spacing($type-name);
  font-weight: font-weight($type-name);
  text-transform: text-transform($type-name);
  font-style: $style;
}

@mixin button($size: medium) {
  width: fit-content;
  line-height: line-height(button);
  border-radius: rounded(2);
  cursor: pointer;
  padding: 1rem spacer(3);

  @if $size == small {
    padding: spacer(2) spacer(3);
  }
}

/* Helpers for getting dynamic CSS variables */

@function color($color-name) {
  @return var(--color-#{$color-name});
}

@function max-w($max-width-name: global) {
  @return var(--max-width-#{$max-width-name});
}

@function grid-gutter() {
  @return var(--grid-gutter);
}

@function grid-margin() {
  @return var(--grid-margin);
}

@function rounded($border-radius-name: 1) {
  @return var(--border-radius-#{$border-radius-name});
}

@function spacer($spacer-name) {
  @return var(--spacer-#{$spacer-name});
}

@function z($z-index-name) {
  @return var(--z-index-#{$z-index-name});
}

@function easing($function-name: in-out-cubic) {
  @return var(--ease-#{$function-name});
}

@function font-family($type-name) {
  @return var(--font-family-#{$type-name});
}

@function font-size($type-name) {
  @return var(--font-size-#{$type-name});
}

@function line-height($type-name) {
  @return var(--line-height-#{$type-name});
}

@function letter-spacing($type-name) {
  @return var(--letter-spacing-#{$type-name});
}

@function font-weight($type-name) {
  @return var(--font-weight-#{$type-name});
}

@function text-transform($type-name) {
  @return var(--text-transform-#{$type-name}, none);
}

/* Browser-specific media queries */

// Chrome
@mixin chrome {
  @media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
    @content;
  }
}

// Safari
@mixin safari {
  @media not all and (min-resolution: 0.001dpcm) {
    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
      @content;
    }
  }
}

// Firefox
@mixin firefox {
  @-moz-document url-prefix() {
    @content;
  }
}

// Internet Explorer
@mixin ie {
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @content;
  }
}

// Microsoft Edge
@mixin edge {
  @supports (-ms-ime-align: auto) {
    @content;
  }
}