// Put scss mixins here
@use 'sass:map';

// min-width media query
@mixin min-query($device) {
  @if map-has-key($breakpoints, $device) {
    @media (min-width: map-get($breakpoints, $device)) {
      @content;
    }
  } @else {
    // device is not in our map, but it might be a width value
    @media (min-width: $device) {
      @content;
    }
  }
}

// Shorthand for tablet media query
// e.g.
//   @include tablet {
//     font-size: 24px;
//   }
@mixin tablet {
  @include min-query(tablet) {
    @content;
  }
}

// Shorthand for desktop media query
// e.g.
//   @include desktop {
//     font-size: 32px;
//   }
@mixin desktop {
  @include min-query(desktop) {
    @content;
  }
}

// apply a css rule at all breakpoints with suffix of device name for the variant
@mixin responsive-variant-classes($variantName, $prop, $value) {
  &.#{$variantName} {
    #{$prop}: #{$value};
  }
  @each $device, $width in $breakpoints {
    &.#{$variantName}-#{$device} {
      @include min-query($device) {
        #{$prop}: #{$value};
      }
    }
  }
}

// shorthand for calculating multiples of base spacing
@function spacing($multiplier) {
  @return calc(var(--base-spacing) * #{$multiplier});
}

@mixin reset-btn {
  // reset button style
  background: none;
  border: none;
  text-decoration: none;
  cursor: pointer;
}

// https://gist.github.com/tobiasahlin/7a421fb9306a4f518aab
// Usage:   @include transition(width, height 0.3s ease-in-out);
// Output:  -webkit-transition(width 0.2s, height 0.3s ease-in-out);
//          transition(width 0.2s, height 0.3s ease-in-out);
// Pass in any number of transitions
@mixin transition($transitions...) {
  $unfoldedTransitions: ();
  @each $transition in $transitions {
    $unfoldedTransitions: append($unfoldedTransitions, unfold-transition($transition), comma);
  }

  transition: $unfoldedTransitions;

  @include reduced-motion {
    transition-duration: 0s;
  }
}

@function unfold-transition($transition) {
  // Default values
  $property: all;
  $duration: var(--go-duration-normal);
  $easing: var(--go-timing-function);
  $delay: null; // Browser default is 0, which is what we want
  $defaultProperties: ($property, $duration, $easing, $delay);

  // Grab transition properties if they exist
  $unfoldedTransition: ();
  @for $i from 1 through length($defaultProperties) {
    $p: null;
    @if $i <= length($transition) {
      $p: nth($transition, $i);
    } @else {
      $p: nth($defaultProperties, $i);
    }

    $unfoldedTransition: append($unfoldedTransition, $p);
  }

  @return $unfoldedTransition;
}

// reduced motion media query
@mixin reduced-motion {
  @media (prefers-reduced-motion: reduce) {
    @content;
  }
}

@mixin prefer-light {
  @media (prefers-color-scheme: light) {
    @content;
  }
}

@mixin prefer-dark {
  @media (prefers-color-scheme: dark) {
    @content;
  }
}

@mixin theme-light {
  :where([color-scheme='light'], [data-theme='light']) {
    @content;
  }
}
@mixin theme-dark {
  :where([color-scheme='dark'], [data-theme='dark']) {
    @content;
  }
}

@mixin focus-outline($has-offset: true) {
  outline: var(--go-focus-outline-width, 2px) solid var(--go-focus-outline-color, #000);
  @if $has-offset {
    outline-offset: var(--go-focus-outline-offset);
  }
}

@mixin underline {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

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

@mixin text-size($scale) {
  font-size: var(--go-size-#{$scale});
}

/* Do not use this */
@mixin typo($type-level, $details) {
  margin: 0;
  @include text-size(map-get($details, 'size'));

  font-weight: map-get($details, 'weight');
  line-height: map-get($details, 'line-height');
  letter-spacing: map-get($details, 'letter-spacing');
}

/* Use this */
@mixin typography($type) {
  @include typo(map-get($typography, $type), map-get($typography, $type));
}

@mixin clickable {
  cursor: pointer;
  @include transition(background-color, color, outline-offset var(--go-duration-fast));

  &:focus-visible {
    @include focus-outline;
  }

  &:active {
    --go-focus-outline-offset: 0;

    box-shadow: var(--inner-shadow-3);
  }
}

@mixin unstyled-list {
  list-style: none;
  padding: 0;
  margin: 0;
  li { 
    margin: 0;
  }
}