// ==========================================================================
// Base – Mixins
// ==========================================================================

// Breakpoint sizes
// Example usage @include breakpoint(x) { ... }; - where x is the device
@mixin breakpoint($bp) {
  @if $bp == xl {
    @media only screen and (min-width: $breakpoint-xl) { @content ; }
  }
  @else if $bp == l {
    @media only screen and (min-width: $breakpoint-l) { @content ; }
  }
  @else if $bp == m {
    @media only screen and (min-width: $breakpoint-m) { @content ; }
  }
}

// Font sizes (primary sizing in `rem` units with a fallback of `px`)
// Example usage @include font-size(18);
@mixin font-size ($size) {
  $remValue: $size / 16;
  $pxValue: ($size);
  font-size: $pxValue + px; 
  font-size: $remValue + rem;
}

// Line height sizes (primary sizing in `rem` units with a fallback of `px`)
// Example usage @include line-height(22);
@mixin line-height ($size) {
  $remValue: $size / 16;
  $pxValue: ($size);
  line-height: $pxValue + px; 
  line-height: $remValue + rem;
}

// Background Color with Opacity
// Example Usage: @include bg-rgba(#111, 50%);
@mixin background-alpha($color, $alpha) {
  $opacity: $alpha / 100%;
  $rgba: rgba($color, $opacity);
  background: $color;
  background: rgba($color, $opacity);
}

// Animations
// Example Usage @mixin animation(1s);
@mixin animation($duration: 1s) {
  animation-duration: $duration;
  animation-fill-mode: both;
}

// Arrows
// Example Usage @mixin arrow(4px, #000, up);
@mixin arrow ($size: 5px, $color: #333, $direction: right) {
  position: relative;
  &:before {
    content: "";
    position: absolute;
    border: $size solid transparent;
    z-index: -1;
    @if $direction == right {
      top: 50%;
      left: 100%;
      border-left-color: $color;
      transform: translate3d(0, -50%, 0);
    }
    @else if $direction == left {
      top: 50%;
      left: 0;
      border-right-color: $color;
      transform: translate3d(-100%, -50%, 0);
    }
    @else if $direction == down {
      top: 100%;
      left: 50%;
      border-top-color: $color;
      transform: translate3d(-50%, 0, 0);
    }
    @else if $direction == up {
      top: 0;
      left: 50%;
      border-bottom-color: $color;
      transform: translate3d(-50%, -100%, 0);
    }
  }
}