@use 'sass:map';
@use './tokens.map' as *;
@use './functions' as *;

// Flexbox
//  @include flex(direction, align, justify, gap, wrap);
@mixin flex($direction: row, $align: center, $justify: flex-start, $gap: 0, $wrap: nowrap) {
  display: flex;
  flex-flow: $direction $wrap;
  align-items: $align;
  justify-content: $justify;

  @if $gap {
    gap: $gap;
  }
}

// States
//  @include states(hover, active, size, color);
@mixin states($hover: 0.76, $active: 0.6, $size: 3px, $color: rgba(0, 0, 0, 0.3)) {
  &:disabled,
  &.is-disabled,
  &[aria-disabled='true'] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: opacity(disabled);
    text-decoration: none;
  }

  &:not([aria-disabled='true'], .is-disabled) {
    &:hover {
      filter: brightness($hover);
    }

    &:active {
      filter: brightness($active);
    }

    &:focus,
    &:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 $size $color;
    }
  }
}

// Centering
//  @include center(axis);
//  axis: both | x | y
@mixin center($axis: both) {
  display: flex;

  @if $axis == both {
    align-items: center;
    justify-content: center;
  } @else if $axis == x {
    justify-content: center;
  } @else if $axis == y {
    align-items: center;
  }
}

// Center Absolute
//  @include center-absolute;
@mixin center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

// Screen Reader Only
//  @include sr-only;
@mixin sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
}

// Responsive Utilities
//  @include media-up($breakpoint) { ... }
//  @include media-down($breakpoint) { ... }
//  $breakpoint = 1xs | sm | md | lg | 1xl
@mixin media-up($breakpoint) {
  @media (min-width: breakpoint($breakpoint)) {
    @content;
  }
}

@mixin media-down($breakpoint) {
  @media (width <= calc(breakpoint($breakpoint) - 1px)) {
    @content;
  }
}

// Focus Ring
//  @include focus-ring($color, $offset);
//  $color  = any valid color value
//  $offset = any valid CSS length value (default: 2px)
@mixin focus-ring($color, $offset: 2px) {
  &:focus-visible {
    outline: width(2) solid $color;
    outline-offset: $offset;
  }
}

// Disable Text Selection
//  @include no-select;
@mixin no-select {
  user-select: none; /* Safari */
  user-select: none; /* Firefox */
  user-select: none; /* IE10+/Edge */
  user-select: none; /* Standard */
}

// Font Scale
//  @include font-scale($scale-name);
@mixin font-scale($scale-name) {
  $scale: map.get($typography, scales, $scale-name);

  font: weight(map.get($scale, weight)) size(map.get($scale, size)) / line-height(map.get($scale, family)) font(map.get($scale, family));
  text-transform: case(map.get($scale, case));
}

@mixin disabled {
  &:disabled,
  &.disabled,
  &[aria-disabled='true'] {
    pointer-events: none;
    cursor: not-allowed;
    opacity: opacity(disabled);
    text-decoration: none;
  }
}