$breakpoints: (
  "sm": (
    max-width: #{$bp-sm - 0.1px},
  ),
  "sm-up": (
    min-width: $bp-sm,
  ),
  "md": (
    max-width: #{$bp-md - 0.1px},
  ),
  "md-up": (
    min-width: $bp-md,
  ),
  "lg": (
    max-width: #{$bp-lg - 0.1px},
  ),
  "lg-up": (
    min-width: $bp-lg,
  ),
  "xl": (
    max-width: #{$bp-xl - 0.1px},
  ),
  "xl-up": (
    min-width: $bp-xl,
  ),
  "xxl": (
    max-width: #{$bp-xxl - 0.1px},
  ),
  "xxl-up": (
    min-width: $bp-xxl,
  ),
) !default;

@mixin css-grid($breakpoint) {
  @each $size, $columns in $columns-grid {
    .g-col-#{$breakpoint}-#{$size} {
      display: grid;
      grid-template-columns: repeat($columns, 1fr);
      padding: 0;
    }
  }
}

@mixin css-grid-default() {
  @each $size, $columns in $columns-grid {
    .g-col-#{$size} {
      display: grid;
      grid-template-columns: repeat($columns, 1fr);
      padding: 0;
    }
  }
}

@mixin bp($breakpoint) {
  @if map-has-key($breakpoints, $breakpoint) {
    @media #{inspect(map-get($breakpoints, $breakpoint))} {
      @content;
    }
  } @else {
    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. Available breakpoints are: #{map-keys($breakpoints)}.";
  }
}

@mixin grid-default() {
  @each $size, $percentage in $grid {
    .col-#{$size} {
      width: $percentage;
    }
  }
}

@mixin grid($breakpoint) {
  @each $size, $percentage in $grid {
    .col-#{$breakpoint}-#{$size} {
      width: $percentage;
    }
  }
}

@mixin display($breakpoint) {
  .d-#{$breakpoint}-none {
    display: none !important;
  }

  .d-#{$breakpoint}-block {
    display: block !important;
  }
}

@mixin animated-underline(
  $width: 100%,
  $height: 3px,
  $left: 0,
  $bottom: 0,
  $color: $col-prm
) {
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: $width;
    transform-origin: left center;
    transform: scaleX(0);
    height: $height;
    bottom: $bottom;
    left: $left;
    border-radius: calc(#{$height} / 2);
    background: $color;
    transition: all 0.15s ease-in-out;
  }
  &:hover::after {
    transform: scaleX(1);
  }
}

@mixin animated-underline-is-active($color: $col-prm, $hover-color: $col-prm) {
  &::after {
    transform: scaleX(1);
    background: $color;
  }
  &:hover::after {
    background: $hover-color;
  }
}

@mixin square($size: 3.2rem, $bg: $col-prm) {
  display: block;
  width: $size;
  height: $size;
  background: $bg;
}

@mixin circle($size: 3.2rem, $bg: $col-prm) {
  @include square($size, $bg);
  border-radius: calc(#{$size} / 2);
}

@mixin spinner() {
  @keyframes sk-bouncedelay {
    0%,
    80%,
    100% {
      transform: scale(0);
    }
    40% {
      transform: scale(1);
    }
  }

  text-align: center;
  > * {
    width: 1em;
    height: 1em;
    background-color: $col-prm;
    border-radius: 100%;
    display: inline-block;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation-delay: -0.16s;
  }
  :first-child {
    animation-delay: -0.32s;
  }
  :last-child {
    animation-delay: 0s;
  }
}

@function theme-url($url) {
  @return "/wp-content/themes/" + $theme-name + $url;
}

@function grid-auto-template($minSize: $grid-card-min-width) {
  @return repeat(auto-fill, minmax($minSize, 1fr));
}

@function grid-column($start, $end) {
  @return #{$start + " / " + $end};
}

@function grid-column-full-width() {
  @return grid-column(1, -1);
}

/***************************************
      IMPORT OF PROTOTYPES MIXINS
 !!! keep at the end of this file !!!
 ***************************************/
@import "./assets/css/prototypes/_index.scss";
