// ====================================================================
// MIXINS
//
//   Css declaration shortcuts:
//
//     button-color()
//     font()
//     mx()
//     my()
//     px()
//     py()
//     text-truncate()
//
//   Responsive & Media Queries:
//
//     breakpoint-up()              md / lg / xl (min-width)
//     breakpoint-down()            md / lg / xl (max-width)
//     screen()                     mbl / dsk    (custom ranges)
//
// ====================================================================

@use "sass:color" as color;
@use "sass:string" as string;

// --------------------------------------------------------------------
// FUNCTIONS / MISC
// --------------------------------------------------------------------

// create a color from #RRGGBB hex code, and alpha value (useful when
//  copying or updating colors from FIGMA).
@function hexa($hex, $alpha) {
  $rgba: "rgba(" + color.red($hex) + "," + color.green($hex) + "," +
    color.blue($hex) + "," + $alpha + ")";
  @return unquote($rgba);
}

// --------------------------------------------------------------------
// BUTTON-COLOR
//
//   Helper to create CSS vars & handle states for each button style.
// --------------------------------------------------------------------
@mixin button-color($bg: blue, $text: #fff, $mix: darken) {
  --ko-btn-bg: #{$bg};
  --ko-btn-border: #{$bg};
  --ko-btn-text: #{$text};

  // a darker shade of the main button color
  --ko-btn-bg-darker: #{color.scale($bg, $saturation: 5%, $lightness: -10%)};

  // :hover colors
  --ko-btn-hover-text: #{$text};

  @if $mix == "darken" {
    --ko-btn-hover-bg: #{color.scale($bg, $saturation: 3%, $lightness: -7%)};
    --ko-btn-hover-border: #{color.scale(
        $bg,
        $saturation: 3%,
        $lightness: -7%
      )};
  } @else if $mix == "lighten" {
    --ko-btn-hover-bg: #{color.scale($bg, $saturation: 5%, $lightness: 10%)};
    --ko-btn-hover-border: #{color.scale(
        $bg,
        $saturation: 5%,
        $lightness: 10%
      )};
  } @else if $mix == false {
    --ko-btn-hover-bg: #{$bg};
    --ko-btn-hover-border: #{$bg};
  }

  // .is-disabled
  $--disabled-bg: #{color.scale($bg, $saturation: -15%)};
  $--disabled-bg: #cdcdcd; // #{color.scale($bg, $saturation: -80%)};
  --ko-btn-disabled-bg: #{$--disabled-bg};
  --ko-btn-disabled-border: #{$--disabled-bg};
  --ko-btn-disabled-text: #757575;

  // outline aka "ghost" buttons
  &.is-ghost {
    --ko-btn-bg: transparent;
    --ko-btn-border: #{$bg};
    --ko-btn-text: var(--ko-btn-bg-darker);
    --ko-btn-hover-bg: transparent;
    --ko-btn-hover-border: var(--ko-btn-bg-darker);
    --ko-btn-hover-text: #{color.scale($bg, $saturation: 10%, $lightness: -20%)};
  }
}

// --------------------------------------------------------------------
// FONT
//
//   Examples:
//
//     @include font(16px, 1.3em, 500);
//     @include font(16px, 1.2em);
//
//     @include font($lineHeight: 1.2em);
//
//     @include font($size: 12px, $weight: 500);
//     @include font(12px, $weight: 500);
//
//     @include font($family: '"Courier New", monospace');
//
// --------------------------------------------------------------------
@mixin font($size: null, $lineHeight: null, $weight: null, $family: null) {
  @if $size {
    font-size: $size;
  }

  @if $lineHeight {
    line-height: $lineHeight;
  }

  @if $weight {
    font-weight: $weight;
  }

  @if $family {
    font-family: string.unquote($family);
  }
}

// --------------------------------------------------------------------
// MX / MY
//
//   Shorthand to set horizontal margins.
//
//   Commonly used for negative margins, eg:
//
//     @include mx(-10px);
//
// --------------------------------------------------------------------
@mixin mx($unit) {
  margin-left: $unit;
  margin-right: $unit;
}
@mixin my($unit) {
  margin-top: $unit;
  margin-bottom: $unit;
}

// --------------------------------------------------------------------
// PX / PY
//
//   Shorthand to set horizontal / vertical padding only.
//
// --------------------------------------------------------------------
@mixin px($unit) {
  padding-left: $unit;
  padding-right: $unit;
}
@mixin py($unit) {
  padding-top: $unit;
  padding-bottom: $unit;
}

// --------------------------------------------------------------------
// TEXT-TRUNCATE
// --------------------------------------------------------------------
@mixin text-truncate($overflow-mode: ellipsis) {
  text-overflow: $overflow-mode;
  white-space: nowrap;
  overflow: hidden;
}

// --------------------------------------------------------------------
// BREAKPOINT-UP (min-width)
//
//   Tailwind breakpoints (keep in sync with tailwind config!)
//
//     md        ... matches tailwind `md`
//     lg        ... matches tailwind `lg`
//     xl        ... matches tailwind `xl`
//
//   Examples:
//
//      @include breakpoint-up(md) { ... }
//
// --------------------------------------------------------------------
@mixin breakpoint-up($size) {
  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "md" {
    @media only screen and (min-width: $--bp-md) {
      @content;
    }
  }

  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "lg" {
    @media only screen and (min-width: $--bp-lg) {
      @content;
    }
  }

  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "xl" {
    @media only screen and (min-width: $--bp-xl) {
      @content;
    }
  }
}

// --------------------------------------------------------------------
// BREAKPOINT-DOWN (max-width)
//
//   Similar to Bootstrap's `breakpoint-down()`.
//   https://getbootstrap.com/docs/5.0/layout/breakpoints/#max-width
// --------------------------------------------------------------------
@mixin breakpoint-down($size) {
  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "md" {
    @media only screen and (max-width: $--bp-md - 0.02px) {
      @content;
    }
  }

  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "lg" {
    @media only screen and (max-width: $--bp-lg - 0.02px) {
      @content;
    }
  }

  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "xl" {
    @media only screen and (max-width: $--bp-xl - 0.02px) {
      @content;
    }
  }
}

// --------------------------------------------------------------------
// CUSTOM RANGES (match custom bp's in tailwind config)
//
// --------------------------------------------------------------------
@mixin screen($size) {
  // MUST match the same named breakpoint in tailwind.config.js!
  @if $size == "mbl" {
    @media only screen and (max-width: 991px) {
      @content;
    }
  }

  @if $size == "dsk" {
    @media only screen and (min-width: 992px) {
      @content;
    }
  }
}
