// Buttons Mixins

@mixin btn-base {
  position: relative;
  display: inline-flex;
  width: auto;
  border-radius: 50px;
  font-family: $font-alternative;
  font-variation-settings: $font-slnt-normal;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition: $default-transition;
  z-index: 0;
  cursor:pointer; 

  span {
    transform: skewX(0deg);
    font-variation-settings: $font-slnt-normal;
    transition: transform $default-transition;
    pointer-events: none;
  }

  &:hover:not(.btn--rest) {
    font-variation-settings: $font-slnt-30-positive;

    span {
      transform: skewX(-30deg);
    }
  }
}

@mixin btn--lg {
  height: 98px;
  padding: 0 72px;
  font-size: 26px
}

@mixin btn--md {
  height: 87px;
  padding: 0 58px;
  font-size: 24px
}

@mixin btn--sm {
  height: 65px;
  padding: 0 40px;
  font-size: 21px
}

@mixin btn--xs {
  height: 48px;
  padding: 0 28px;
  font-size: 16px
}

@mixin btn--menu {
  height: 55px;
  padding: 0 24px;
  font-size: 18px
}

@mixin btn--filter {
  box-shadow: none;
  font-size: 2.4rem;
  padding: 0;
  min-height: 35px;
  transition: none;

  @include breakpoint-sm {
    height: 72px;
    padding: 0 40px;
    min-height: 48px;
    font-size: 2rem;
    box-shadow: inset 0px 0px 0px 2px $color-dark-blue;
    transition: $default-transition;
    border-radius: 6px;

    &.btn--light {
      box-shadow: inset 0px 0px 0px 2px $color-white;
    }
  }

  &.active {
    span {
      border-radius: 0;
      border-bottom: 3px solid $color-bright-blue;
      transform: skewX(-30deg);

      @include breakpoint-sm {
        border-radius: 50%;
        border-bottom: none;
        transform: skewX(0deg);
      }
    }
  }
}

@mixin btn--outline {
  color: $color-dark-blue;
  box-shadow: inset 0px 0px 0px 2px $color-dark-blue;
}

@mixin btn--bg {
  background-color: $color-bright-blue;
  color: $color-white;
  box-shadow: inset 0px 0px 0px 2px $color-bright-blue;
}

@mixin btn--light {
  color: $color-white;
  box-shadow: inset 0px 0px 0px 2px $color-white;

  &.btn--filter {
    color: $color-dark-blue;

    @include breakpoint-sm {
      color: $color-white;
    }
  }

  &.btn--link {
    border-bottom-color: $color-white;
  }
}

@mixin btn--fill {
  color: $color-white;
  box-shadow: inset 0px 0px 0px 2px transparent;

  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50px;
    background-color: $color-bright-blue;
    transition: $default-transition;
    z-index: -1;
  }
  
  &:hover {
    &:before {
      filter: blur(4px);
    }
  }

  &.btn--link {
    color: $color-bright-blue;

    &:before {
      display: none;
    }
  }

  &:focus {
    color: $color-white;
  }
}

@mixin btn--link {
  height: auto;
  padding: 0;
  box-shadow: none !important;
  border-bottom: 2px solid $color-bright-blue;
  border-radius: 0;
}

@mixin btn--disabled {
  color: #999;
  box-shadow: inset 0px 0px 0px 2px #999;
  pointer-events: none;

  &.btn--fill {
    color: $color-white;
    box-shadow: inset 0px 0px 0px 2px transparent;

    &:before {
      background-color: #999;
    }
  }

  &.btn--link {
    color: #999;
    border-bottom-color: #999;
    box-shadow: none;
  }
}

@mixin btn--fit {
  height: auto;
  min-height: 48px;
  padding-top: 6px;
  padding-bottom: 6px;
  line-height: 120%;
}

@mixin btn-default {
  @include btn-base;
  @include btn--md;
}

@mixin btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid $color-bright-blue;

  @include breakpoint-md {
    width: 80px;
    height: 80px;
  }

  svg {
    width: 24px;
    height: 24px;

    @include breakpoint-md {
      width: 32px;
      height: 32px;
    }
  }
}

@mixin btn-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  z-index: 1;

  @include breakpoint-md {
    width: 112px;
    height: 112px;
  }

  button {
    position: inherit;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid $color-bright-blue;
    transition: filter 300ms ease-out;
    will-change: transform;

    @include breakpoint-md {
      width: 112px;
      height: 112px;
    }
  }

  svg {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    width: 20px;
    height: 20px;

    @include breakpoint-md {
      width: 32px;
      height: 32px;
    }
  }

  &.btn-arrow-next {
    svg {
      transform: rotate(180deg);
    }
  }

  &.btn-arrow-bg-dark {
    background-color: $color-dark-blue;
  }

  &.btn-arrow-bg-grey {
    background-color: $color-grey
  }

  &.btn-arrow-simple {
    button {
      border: none;
    }

    svg {
      path {
        fill: $color-dark-blue
      }
    }

    &--grey {
      svg {
        path {
          fill: $color-grey
        }
      }
    }
  }

  &:hover {
    background-color: transparent;

    button {
      filter: blur(6px);
      background-color: $color-bright-blue;
      border: none;
    }

    &.btn-arrow-bg-grey,
    &.btn-arrow-simple {
      svg {
        path {
          fill: $color-grey
        }
      }
    }

    &.btn-arrow-simple--grey {
      button {
        background-color: $color-grey;
      }

      svg {
        path {
          fill: $color-dark-blue
        }
      }
    }
  }
}

// Dots Mixins

@mixin dot-blur {
  display: inline-flex;
  align-items: center;
  &::before {
    content: '';
    border-radius: 100%;
    background: $color-bright-blue;
  }
}

@mixin dot-blur--12 {
  @include dot-blur;
  &::before {
    width: 12px;
    height: 12px;
    margin-right: 12px;
    filter: blur(4px);
  }
}

@mixin dot-blur--16 {
  @include dot-blur;
  &::before {
    width: 16px;
    height: 16px;
    margin-right: 16px;
    padding-right: 16px;
    filter: blur(4px);
  }
}

@mixin dot-blur--24 {
  @include dot-blur;

  &::before {
    width: 16px;
    height: 16px;
    margin-right: 16px;
    filter: blur(4px);
  }

  @include breakpoint-sm {
    &::before {
      width: 24px;
      height: 24px;
      margin-right: 24px;
      filter: blur(6px);
    }
  }
}

// Image ratio mixin

@mixin image-aspect-ratio($maxWidth, $aspectRatio) {
  margin: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: $maxWidth;

  &::before {
    content: "";
    display: block;
    padding-bottom: $aspectRatio;
  }

  img,
  svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }

  :deep(img),
  :deep(svg) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
  }
}

// Media queries Mixins
/**
* Mixins to create media-queries (min-width)
*/
@mixin breakpoint-xxlg {
  @media (min-width: #{$screen-xxlg}) {
    @content;
  }
}

@mixin breakpoint-xlg {
  @media (min-width: #{$screen-xlg}) {
    @content;
  }
}

@mixin breakpoint-xlg-down {
  @media (max-width: #{$screen-xlg - 1px}) {
    @content;
  }
}

@mixin breakpoint-lg {
  @media (min-width: #{$screen-lg}) {
    @content;
  }
}

@mixin breakpoint-lg-down {
  @media (max-width: #{$screen-lg - 1px}) {
    @content;
  }
}

@mixin breakpoint-xmd {
  @media (min-width: #{$screen-xmd}) {
    @content;
  }
}

@mixin breakpoint-md {
  @media (min-width: #{$screen-md}) {
    @content;
  }
}

@mixin breakpoint-md-down {
  @media (max-width: #{$screen-md - 1px}) {
    @content;
  }
}

@mixin breakpoint-sm {
  @media (min-width: #{$screen-sm}) {
    @content;
  }
}

@mixin breakpoint-xs {
  @media (min-width: #{$screen-xs}) {
    @content;
  }
}

@mixin breakpoint-xxs {
  @media (min-width: #{$screen-xxs}) {
    @content;
  }
}

@mixin breakpoint-sm-down {
  @media (max-width: #{$screen-sm - 1px}) {
    @content;
  }
}

@mixin breakpoint-height-down {
  @media (min-height: #{$screen-height-xs}) and (max-height: #{$screen-height-sm}) and (min-width: #{$screen-sm}) {
    @content;
  }
}

// Grid Mixins
// Container mixin.

@mixin grid-container {
  padding: 0 $mobile-gutter;
  width: 100%;
  max-width: $max-width;
  margin: 0 auto;

  @include breakpoint-sm {
    padding: 0 $gutter;
  }
}

@mixin grid-column-container {
  width: 100%;
  column-gap: $column-gutter-mobile;
  display: flex;
  flex-wrap: wrap;

  @include breakpoint-sm {
    column-gap: $column-gutter-desktop;
  }
}

/**
  * Grid column mixin.
  * Pass the number of columns and the maximum grid columns
  * $gridColumnNumber default: $column-number-desktop / $column-number-mobile
  *
  * Ex. @include grid-column(6) (set 6 columns of 12)
  * Ex. @include grid-column(6, 10) (set 6 columns of 10)
  */

@mixin grid-column($columnNumber, $gridColumnNumber: false) {
  @if $gridColumnNumber {
    --gridColumnNumber: #{$gridColumnNumber} !important;
  }

  $gap-number: calc(var(--gridColumnNumber) - #{$columnNumber});

  width: calc(
    (100% * #{$columnNumber} / var(--gridColumnNumber)) -
      calc(#{$gap-number} * #{$column-gutter-mobile} / var(--gridColumnNumber))
  );

  @include breakpoint-sm {
    width: calc(
      (100% * #{$columnNumber} / var(--gridColumnNumber)) -
        calc(
          #{$gap-number} * #{$column-gutter-desktop} / var(--gridColumnNumber)
        )
    );
  }
}

@mixin grid-offset($columnNumber, $gridColumnNumber: false) {
  @if $gridColumnNumber {
    --gridColumnNumber: #{$gridColumnNumber} !important;
  }

  $gap-number: calc(var(--gridColumnNumber) - #{$columnNumber});

  margin-left: calc(
    (100% * #{$columnNumber} / var(--gridColumnNumber)) -
      calc(#{$gap-number} * #{$column-gutter-mobile} / var(--gridColumnNumber)) +
      #{$column-gutter-mobile}
  );

  @include breakpoint-sm {
    margin-left: calc(
      (100% * #{$columnNumber} / var(--gridColumnNumber)) -
        calc(
          #{$gap-number} * #{$column-gutter-desktop} / var(--gridColumnNumber)
        ) + #{$column-gutter-desktop}
    );
  }
}

// Typography mixins
@mixin h1 {
  font-family: $font-heading;
  font-size: $font-size-h1-mobile;
  line-height: $line-height-h1;
  font-weight: $font-weight-normal;
  font-variation-settings: $font-slnt-normal;
  letter-spacing: 0.02em;
  hyphens: auto;

  @include breakpoint-lg {
    font-size: $font-size-h1-desktop-medium;
  }

  @include breakpoint-xxlg {
    font-size: $font-size-h1;
  }

  strike {
    &::after {
      content: "";
      height: 6px;
      top: 29px;

      @include breakpoint-lg {
        top: 48px;
        height: 12px;
      }

      @include breakpoint-xlg {
        top: 80px;
      }
    }
  }

  u {
    text-decoration-color: $color-bright-blue;
    text-decoration-thickness: 6px;
    text-underline-offset: 10px;
    padding-bottom: 5px;

    @include breakpoint-lg {
      text-decoration-thickness: 12px;
      text-underline-offset: 14px;
      padding-bottom: 12px;
    }

    @include breakpoint-xlg {
      text-underline-offset: 25px;
      padding-bottom: 10px;
    }
  }
}

@mixin h2 {
  font-family: $font-heading;
  font-size: $font-size-h2-mobile;
  line-height: $line-height-h2;
  font-weight: $font-weight-normal;
  font-variation-settings: $font-slnt-normal;
  hyphens: auto;

  @include breakpoint-lg {
    font-size: $font-size-h2-desktop-medium;
  }

  @include breakpoint-xxlg {
    font-size: $font-size-h2;
  }

  strike {
    &::after {
      content: "";
      height: 6px;
      top: 27px;

      @include breakpoint-lg {
        top: 38px;
        height: 10px;
      }

      @include breakpoint-xxlg {
        top: 60px;
      }
    }
  }

  u {
    text-decoration-thickness: 6px;
    text-decoration-color: $color-bright-blue;
    text-underline-offset: 9px;
    padding-bottom: 5px;

    @include breakpoint-lg {
      text-decoration-thickness: 10px;
      text-underline-offset: 12px;
      padding-bottom: 10px;
    }

    @include breakpoint-xlg {
      text-underline-offset: 18px;
    }
  }
}

@mixin h3 {
  font-family: $font-heading;
  font-size:  $font-size-h3-mobile;
  line-height: $line-height-h3;
  font-weight: $font-weight-normal;
  font-variation-settings: $font-slnt-normal;
  hyphens: auto;

  @include breakpoint-lg {
    font-size: $font-size-h3-desktop-medium;
  }

  @include breakpoint-xxlg {
    font-size: $font-size-h3;
  }

  strike {
    &::after {
      content: "";
      height: 6px;
      top: 21px;

      @include breakpoint-lg {
        top: 33px;
      }

      @include breakpoint-xxlg {
        top: 42px;
      }
    }
  }

  u {
    text-decoration-thickness: 6px;
    text-decoration-color: $color-bright-blue;
    text-underline-offset: 10px;
    padding-bottom: 5px;

    @include breakpoint-xlg {
      text-underline-offset: 12px;
    }
  }
}

@mixin h4 {
  font-family: $font-heading;
  font-size: $font-size-h4-mobile;
  line-height: $line-height-h4;
  font-weight: $font-weight-normal;
  font-variation-settings: $font-slnt-normal;
  hyphens: auto;

  @include breakpoint-sm {
    font-size: $font-size-h4;
  }

  strike {
    &::after {
      content: "";
      height: 6px;
      top: 19px;

      @include breakpoint-lg {
        top: 32px;
      }
    }
  }

  u {
    text-decoration-thickness: 6px;
    text-decoration-color: $color-bright-blue;
    text-underline-offset: 10px;
    padding-bottom: 5px;
  }
}

@mixin h5 {
  font-family: $font-heading;
  font-size: $font-size-h5-mobile;
  line-height: $line-height-h5;
  font-weight: $font-weight-normal;
  font-variation-settings: $font-slnt-normal;
  hyphens: auto;

  @include breakpoint-lg {
    font-size: $font-size-h5;
  }

  strike {
    &::after {
      content: "";
      height: 4px;
      top: 26px;
    }
  }

  u {
    text-decoration-thickness: 4px;
    text-decoration-color: $color-bright-blue;
    text-underline-offset: 8px;
  }
}

@mixin h6 {
  font-family: $font-heading;
  font-size: $font-size-h6;
  line-height: $line-height-h6;
  font-weight: $font-weight-normal;
  font-variation-settings: $font-slnt-normal;
  hyphens: auto;

  strike {
    &::after {
      content: "";
      height: 2px;
      top: 17px;
    }
  }

  u {
    text-decoration-thickness: 2px;
    text-decoration-color: $color-bright-blue;
    text-underline-offset: 6px;
  }
}

@mixin text-large {
  font-size: $font-size-text-large-mobile;
  line-height: 150%;
  font-weight: $font-weight-light;
  letter-spacing: 0.02em;
  font-family: $font-body;

  @include breakpoint-sm {
    font-size: $font-size-text-large;
    line-height: 140%;
  }
}