@charset "UTF-8";

// Media queries
@use 'sass:math';

@mixin mq($mq-breakpoint) {
  @if map-has-key($mq-breakpoints, $mq-breakpoint) {
    $mq-device: '';
    @if $enable-mq-device == true {
      $mq-device: '-device';
    }

    $mq-range: 'min';
    @if $mq-breakpoint == nth(map-keys($mq-breakpoints), 1) {
      $mq-range: 'max';
    }

    @media all and (#{$mq-range}#{$mq-device}-width:map-get($mq-breakpoints, $mq-breakpoint)) {
      @content;
    }
  }
}

@mixin mq-custom($mq-range, $mq-breakpoint) {
  $mq-device: '';
  @if $enable-mq-device == true {
    $mq-device: '-device';
  }

  @media all and (#{$mq-range}#{$mq-device}-width:$mq-breakpoint) {
    @content;
  }
}

// Container
@mixin container {
  margin-right: auto;
  margin-left: auto;

  @if $enable-mq == true {
    @each $mq-container-width in $mq-container-widths {
      $mq: nth($mq-container-width, 1);
      $container-width: nth($mq-container-width, 2);

      @include mq($mq) {
        max-width: $container-width;
      }
    }

    @each $mq-container-indent in $mq-container-indents {
      $mq: nth($mq-container-indent, 1);
      $container-indent: nth($mq-container-indent, 2);

      @include mq($mq) {
        padding-right: $container-indent;
        padding-left: $container-indent;
      }
    }
  } @else {
    padding-right: $container-indent;
    padding-left: $container-indent;
    max-width: $container-width;
  }
}

// Grid
@mixin grid($main-axis: x, $justify-content: flex-start, $align-items: flex-start, $multiplier: 1) {
  display: flex;
  justify-content: $justify-content;
  align-items: $align-items;

  @if $main-axis == x {
    flex-flow: row wrap;
  }

  @if $main-axis == y {
    flex-flow: column nowrap;
  }

  @if $enable-mq == true {
    @each $mq-grid-gutter in $mq-grid-gutters {
      $mq: nth($mq-grid-gutter, 1);
      $gutter: -#{nth($mq-grid-gutter, 2) * 0.5 * $multiplier};

      @include mq($mq) {
        margin-right: $gutter;
        margin-left: $gutter;
      }
    }
  } @else {
    $gutter: -$grid-gutter * 0.5 * $multiplier;

    margin-right: $gutter;
    margin-left: $gutter;
  }
}

// Grid col
@mixin grid-col($multiplier: 1) {
  @if $enable-mq == true {
    @each $mq-grid-gutter in $mq-grid-gutters {
      $mq: nth($mq-grid-gutter, 1);
      $gutter: nth($mq-grid-gutter, 2) * 0.5 * $multiplier;

      @include mq($mq) {
        padding-right: $gutter;
        padding-left: $gutter;
      }
    }
  } @else {
    $gutter: $grid-gutter * 0.5;

    padding-right: $gutter * $multiplier;
    padding-left: $gutter * $multiplier;
  }
}

@mixin grid-col-mx($size, $multiplier: 1) {
  flex: 0 0 $size * 100%;
  max-width: $size * 100%;

  @if $enable-mq == true {
    @each $mq-grid-gutter in $mq-grid-gutters {
      $mq: nth($mq-grid-gutter, 1);
      $gutter: nth($mq-grid-gutter, 2) * 0.5 * $multiplier;

      @include mq($mq) {
        padding-right: $gutter;
        padding-left: $gutter;
      }
    }
  } @else {
    $gutter: $grid-gutter * 0.5;

    padding-right: $gutter * $multiplier;
    padding-left: $gutter * $multiplier;
  }
}

@mixin flex-list-wrap($col: 0, $gapX: 0rem, $gapY: $gapX, $checkWrap: true) {
  display: flex;
  margin: (-($gapY * 0.5)) (-($gapX * 0.5));

  @if $checkWrap == true {
    flex-wrap: wrap;
  }

  > * {
    margin: ($gapY * 0.5) ($gapX * 0.5);
    @if col {
      $width-col: math.div(100%, $col);
      width: calc(#{$width-col} - #{$gapX});
    }
  }
}

// Col size
@mixin col-size($size) {
  width: $size * 100%;
}

// Col center
@mixin col-center {
  margin-right: auto;
  margin-left: auto;
}

// Ellipsis
// https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_ellipsis.scss
@mixin ellipsis($width: 100%, $display: inline-block) {
  display: $display;
  max-width: $width;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-wrap: normal;
}

// hide scrollbar
@mixin scroll-not-scrollbar($overflow-x: auto, $overflow-y: auto) {
  overflow-x: $overflow-x;
  overflow-y: $overflow-y;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none; // hide scrollbar
  overflow: -moz-scrollbars-none; // hide scrollbar

  &::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
  }
}

// Font
@mixin font($font-size, $line-height: $font-size) {
  font-size: $font-size;
  line-height: math.div(strip-units($line-height), strip-units($font-size));
}

// indents
@mixin wysiwyg-indents-md {
  &:not(:first-child) {
    margin-top: 2.4rem;
  }

  &:not(:last-child) {
    margin-bottom: 2.4rem;
  }
}

@mixin wysiwyg-indents-lg {
  &:not(:first-child) {
    margin-top: 3.2rem;
  }

  &:not(:last-child) {
    margin-bottom: 3.2rem;
  }
}

// Interact
@mixin interact($properties-list, $values-list, $state: hover) {
  $properties-length: length($properties-list);
  $values-length: length($values-list);

  @if $properties-length == $values-length {
    @if $enable-interact-multiple == true {
      &:#{$state},
      &.#{$state} {
        @for $i from 1 through $properties-length {
          #{nth($properties-list, $i)}: nth($values-list, $i);
        }
      }
    } @else {
      &:#{$state} {
        @for $i from 1 through $properties-length {
          #{nth($properties-list, $i)}: nth($values-list, $i);
        }
      }
    }
  }
}

// Size
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// Headings
@mixin h {
  font-family: $font-family-title;

  a,
  button {
    @include interact(text-decoration, underline);

    font-weight: inherit;
    text-decoration: none;
  }
}

// button-focus
@mixin button-focus {
  outline: 0 !important;
  transition: outline 0ms;

  &:focus {
    background: $brand-green-pea;
    color: #fff;
  }

  &:active {
    outline: 0;
  }
}

// button-focus secondary
@mixin button-focus-secondary {
  outline: 0;
  transition: all $transition-duration-base-min outline 0ms;

  &:focus {
    background: #fff;
    box-shadow: 0 12px 12px rgba(0, 0, 0, 0.12);
  }
}

// scroll styles
@mixin customScrollbar($show-hover: false) {
  scrollbar-base-color: #c5c5c5;
  scrollbar-arrow-color: #000000;
  scrollbar-3dlight-color: #ffffff;
  scrollbar-highlight-color: #ffffff;
  scrollbar-shadow-color: #ffffff;
  scrollbar-dark-shadow-color: #ffffff;

  scrollbar-color: #c5c5c5 transparent;
  scrollbar-gutter: auto;

  @if $show-hover == true {
    scrollbar-width: none;

    &:hover {
      scrollbar-width: thin;

      &::-webkit-scrollbar {
        display: unset;
      }
    }
  }

  @if $show-hover == false {
    scrollbar-width: thin;
  }

  &::-webkit-scrollbar {
    @include size(8px);
    @if $show-hover == true {
      display: none;
    }
  }

  &::-webkit-scrollbar-button {
    @include size(8px, 0);
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5rem;
    border: 0 none #ffffff;
    background: rgba(0, 0, 0, 0.2);
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.4);
  }

  &::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, 0.5);
  }

  &::-webkit-scrollbar-track {
    border-radius: 3.3rem;
    border: 0 none #ffffff;
    background: #ffffff;
  }

  &::-webkit-scrollbar-track:hover {
    background: $color-lightest-minimal;
  }

  &::-webkit-scrollbar-track:active {
    background: $color-lightest-minimal;
  }

  &::-webkit-scrollbar-corner {
    background: transparent;
  }
}