@import "../settings.breakpoints";
@import "../settings.colors";
@import "../settings.z-index";
@import "settings.fonts";

@import "tools.functions";

// General helper mixins

// MOBILE
@mixin xs-mobile-only {
  @include mq($until: mobileMedium) {
    @content;
  }
}

@mixin mobile-only {
  @include mq($until: tablet) {
    @content;
  }
}

@mixin mobile-down {
  @include mq($until: tablet) {
    @content;
  }
}

@mixin mobile-up {
  @include mq($from: tablet) {
    @content;
  }
}

@mixin mobile-landscape {
  @media only screen and (min-device-width: $break-mobile) and (max-device-width: $break-tablet) and (orientation: landscape) {
    @content;
  }
}

// TABLET
@mixin tablet-only {
  @include mq($from: tablet, $until: desktop) {
    @content;
  }
}

@mixin tablet-up {
  @include mq($from: tabletMedium) {
    @content;
  }
}

@mixin tablet-down {
  @include mq($until: tabletMedium) {
    @content;
  }
}

@mixin tablet-landscape-only {
  @include mq($from: tabletMedium, $until: desktop) {
    @content;
  }
}

@mixin tablet-portrait-only {
  @include mq($from: tablet, $until: tabletMedium) {
    @content;
  }
}

@mixin tablet-portrait-down {
  @include mq($until: tabletMedium) {
    @content;
  }
}

@mixin tablet-portrait-up {
  @include mq($from: tabletMedium) {
    @content;
  }
}

@mixin mobile-devices {
  // sass-lint:disable no-vendor-prefixes
  @media only screen and (min-device-width: $break-mobile) and (max-device-width: $break-tablet) and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }
  // sass-lint:enable no-vendor-prefixes
}

// DESKTOP
@mixin desktop-down {
  @include mq($until: desktop) {
    @content;
  }
}

@mixin desktop-up {
  @include mq($from: desktop) {
    @content;
  }
}

@mixin meta-text {
  @include font-gm-sans;
  font-size: rem(12);
  color: $color-grey-660;
  text-transform: uppercase;
  line-height: 1.4;
  letter-spacing: rem(1);
}

@mixin remove-button-appearance {
  cursor: pointer;
  border: none;
  background-color: transparent;
  appearance: none;
  display: block;
}

@mixin font-rendering-fix {
  // Fix font rendering problems in various browsers
  // (font-smoothing isn't part of the spec and therefore unsupported by autorpefixer)
  // sass-lint:disable no-vendor-prefixes, no-misspelled-properties
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  // sass-lint:enable no-vendor-prefixes, no-misspelled-properties
  text-rendering: optimizelegibility;
}

@mixin gradient-layer($position: bottom, $color: $color-white, $size: 10rem) {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: $z-index-menu-scroll-shadow;
  @if $position == bottom {
    width: 100%;
    height: $size;
    background: linear-gradient(to bottom, rgba($color, 0) 0%, rgba($color, 1) 100%);
    bottom: 0;
    left: 0;
  }
  @if $position == top {
    width: 100%;
    height: $size;
    background: linear-gradient(to bottom, rgba($color, 1) 0%, rgba($color, 0) 100%);
    top: 0;
    left: 0;
  }
  @if $position == left {
    width: $size;
    height: 100%;
    background: linear-gradient(to left, rgba($color, 0) 0%, rgba($color, 1) 100%);
    top: 0;
    left: 0;
  }
  @if $position == right {
    width: $size;
    height: 100%;
    background: linear-gradient(to left, rgba($color, 1) 0%, rgba($color, 0) 100%);
    top: 0;
    right: 0;
  }
}

@mixin gradient-background($position: to bottom, $color-start: $color-white, $color-end: $color-grey-900) {
  background: linear-gradient($position, $color-start, $color-end);
}

// Make element touch scrollabe for mobile
// See: https://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/
// You also need to set the `overflow[-x/y]` property to `scroll` on target element, not `auto`.
@mixin touch-scrollable {
  // sass-lint:disable no-vendor-prefixes, no-duplicate-properties, no-misspelled-properties
  -ms-overflow-style: none; // IE 10+ allow overflow, but no overflow scrollbars.
  -webkit-overflow-scrolling: touch; // momentum touch scrolling (non-standard feature)
  &::-webkit-scrollbar {
    display: none; // Chrome & Opera - allow overflow, but no overflow scrollbars
  }
  // sass-lint:enable no-vendor-prefixes, no-duplicate-properties, no-misspelled-properties
}

// Used for full-width elements, that are centered on the page.
// Inspiration: https://css-tricks.com/full-width-containers-limited-width-parents/
@mixin full-width-relative() {
  position: relative;
  width: 100vw;
  left: calc(50% - 50vw);
}

// Hack to exclude IE11 (because it doesn't support "@supports" feature queries)
@mixin modern-browsers {
  // Every browser that supports feature queries is
  // guaranteed to support "display: block" as well
  @supports (display: block) {
    @content;
  }
}

// Ensure CSS grid works with IE 11 spec.
// https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/
// sass-lint:disable no-vendor-prefixes, no-duplicate-properties
@mixin display-grid {
  display: -ms-grid;
  display: grid;
}

// $columns values should be delimited by a space
@mixin grid-template-columns($columns...) {
  -ms-grid-columns: $columns;
  grid-template-columns: $columns;
}

// $rows values should be delimited by a space
@mixin grid-template-rows($rows...) {
  -ms-grid-rows: $rows;
  grid-template-rows: $rows;
}

// Can be used in combination with above grid-template-X mixins.
// These result in the same output:
// @include grid-template-columns(10px grid-repeat(4, 20px) 30px);
// @include grid-template-columns(10px 20px 20px 20px 20px 30px);
@function grid-repeat($repeat, $stuff: 1fr) {
  $list: ();
  @for $i from 1 through $repeat {
    $list: append($list, $stuff, space);
  }
  @return $list;
}

@mixin grid-column($col-start, $col-end) {
  -ms-grid-column: $col-start;
  -ms-grid-column-span: $col-end - $col-start;
  grid-column: #{$col-start} / #{$col-end};
}

@mixin grid-row($row-start, $row-end) {
  -ms-grid-row: $row-start;
  -ms-grid-row-span: $row-end - $row-start;
  grid-row: #{$row-start} / #{$row-end};
}

@mixin grid-align-self($value) {
  -ms-grid-row-align: $value;
  align-self: $value;
}

@mixin grid-justify-self($value) {
  -ms-grid-column-align: $value;
  justify-self: $value;
}
// sass-lint:enable no-vendor-prefixes, no-duplicate-properties
