@use "design";

// m is for "mixin", and that's good enough for me

// Media queries
// --------------------------------

@mixin handheld {
  @media #{map-get(design.$media, handheld)} {
    @content;
  }
}

@mixin desktop {
  @media #{map-get(design.$media, desktop)} {
    @content;
  }
}

@mixin screen {
  @media screen {
    @content;
  }
}

@mixin print {
  @media print {
    @content;
  }
}

@mixin hover($focus: true) {
  @media only screen and (hover: hover) {
    &:hover {
      @content;
    }
  }

  @if $focus == true {
    &:focus-visible {
      @content;
    }
  }
}

@mixin active {
  &:active {
    @content;
  }
}

// webkit helpers

@mixin noSelect {
  user-select: none;
  -webkit-user-select: none;
}

@mixin noCallout {
  -webkit-touch-callout: none;
}

@mixin hideScrollbar {
  // https://blogs.msdn.microsoft.com/kurlak/2013/11/03/hiding-vertical-scrollbars-with-pure-css-in-chrome-ie-6-firefox-opera-and-safari/
  // There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari).
  &::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none;
  }
  // There is a CSS rule that can hide scrollbars in IE 10+.
  -ms-overflow-style: none;

  // Use -ms-autohiding-scrollbar if you wish to display on hover.
  // -ms-overflow-style: -ms-autohiding-scrollbar;

  // There used to be a CSS rule that could hide scrollbars in Firefox, but it has since been deprecated.
  scrollbar-width: none;
}

// design helpers

@mixin shadeActive {
  transition: background-color 50ms;

  @include active {
    background-color: design.$color-surface-active;
  }
}

@mixin focusRingInside {
  box-shadow:
    inset 0 0 0 2px design.$color-focus-outside-border,
    inset 0 0 0 3px design.$color-focus-border;
}

@mixin focusRing {
  box-shadow:
    0 0 0 1px design.$color-focus-border,
    0 0 0 3px design.$color-focus-outside-border;
}

@mixin focusRingWithSpace {
  box-shadow:
    0 0 0 1px design.$color-surface,
    0 0 0 2px design.$color-focus-border,
    0 0 0 4px design.$color-focus-outside-border;
}

@mixin cardRowBottomBorder {
  position: relative;
  border-bottom: 1px solid transparent;

  &::after {
    content: "";
    position: absolute;
    bottom: -1px; // Border is on top, so this puts it actually where you'd expect
    left: design.$card-h-padding;
    right: 0;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: design.$color-outline;
  }
}

@mixin noCardRowBottomBorder {
  &::after {
    content: none;
  }
}

// Theme stuff
// --------------------------------

// Define the CSS vars for a button color. This only defines colors, make sure
// `_createButton()` is also being called with the same name to set up the classes.

@mixin defineButtonColor(
  $name,
  $initialize: false,
  $text,
  $bg,
  $hover: null,
  $active,
  $ghost-text,
  $ghost-hover: null,
  $ghost-active
) {
  --#{$name}-button-text: #{$text};
  --#{$name}-button-bg: #{$bg};
  @if $hover {
    --#{$name}-button-hover: #{$hover};
  }
  --#{$name}-button-active: #{$active};
  --#{$name}-button-ghost-text: #{$ghost-text};
  @if $ghost-hover {
    --#{$name}-button-ghost-hover: #{$ghost-hover};
  }
  --#{$name}-button-ghost-active: #{$ghost-active};

  // If a button color is being defined for the first time, pass
  // `$initialize: true` to set the fallbacks for buttons not allowed
  // to change color based on higher level overrides.

  @if $initialize {
    --#{$name}-forced-button-text: #{$text};
    --#{$name}-forced-button-bg: #{$bg};
    --#{$name}-forced-button-active: #{$active};
    @if $hover {
      --#{$name}-forced-button-hover: #{$hover};
    }
    --#{$name}-forced-button-ghost-text: #{$ghost-text};
    @if $ghost-hover {
      --#{$name}-forced-button-ghost-hover: #{$ghost-hover};
    }
    --#{$name}-forced-button-ghost-active: #{$ghost-active};
  }
}