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

@import "tools.functions";

// General helper mixins

// Hide only visually, but have it available for screen readers.
// Warning: elements containing focusable elements (e.g. links, buttons, etc.)
// should not be hidden in this way, because sighted keyboard users will not be
// able to see the focused element.
// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility

@mixin visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  // TODO: Refactor this to avoid using clip, because it's deprecated
  // https://developer.mozilla.org/en-US/docs/Web/CSS/clip
  clip: rect(0 0 0 0);
  border: 0;
}

@mixin visually-hidden-undo {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
}

// 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;
  @include css-variables("font-size", 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;
  }
}


@mixin flex-display ($display: flex, $wrap: wrap, $flow: "") {
  @if ($display != "") {
    display: $display;
  }
  @if ($wrap != "") {
    flex-wrap: $wrap;
  }
  @if ($flow != "") {
    flex-flow: $flow;
  }
}

// CSS Grid Layout Mixins
// These mixins allow us to use css grid layout in modern browsers, with fallbacks for IE11

// 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;
}

// To build Grid Template Columns with optional gap
// https://gist.github.com/ksenzee/276d60f3e251b1dfafaf52ed8dbdb0de
//
// @param   {string}  $gap - Optional column gap
// @param   {list}    $columns - Columns sizes
//
// @require {function} box-gap
@mixin grid-template-columns($gap, $columns) {
  -ms-grid-columns: box-gap($columns, $gap);
  grid-template-columns: $columns;
  @if $gap >= 0 {
    grid-column-gap: $gap;
  }
}

// To build Grid Template Rows with optional gap
//
// @param   {string}  $gap - Optional row gap
// @param   {list}    $rows - Row sizes
//
// @require {function} box-gap
@mixin grid-template-rows($gap, $rows) {
  -ms-grid-rows: box-gap($rows, $gap);
  grid-template-rows: $rows;
  @if $gap >= 0 {
    grid-row-gap: $gap;
  }
}


@mixin grid-column($start, $end, $gap: false) {
  @if ($gap == true) {
    -ms-grid-column: ($start * 2) - 1;
    -ms-grid-column-span: (($end - $start) * 2) - 1;
  } @else {
    -ms-grid-column: $start;
    -ms-grid-column-span: $end - $start;
  }
  grid-column: #{$start} / #{$end};
}

@mixin grid-row($start, $end, $gap: false) {
  @if ($gap == true) {
    -ms-grid-row: ($start * 2) - 1;
    -ms-grid-row-span: (($end - $start) * 2) - 1;
  } @else {
    -ms-grid-row: $start;
    -ms-grid-row-span: $end - $start;
  }
  grid-row: #{$start} / #{$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


// Mixin for altering the size of article hed
@mixin font-hed($size, $line-height, $weight: bold) {
  @if ($weight == "bold") {
    @include font-pratt-bold;
  } @else {
    @include font-pratt;
  }
  @include css-variables("font-size", $size);
  line-height: line-height($size, $line-height);
  .c-card--adv & {
    font-family: $font-sans-stack;
    font-weight: $weight;
  }
}

// NOTE: Until WaPo fixes an issue with PageBuilder's uglifier where
// it strips the "s" from "0s", we have to write out the individual,
// long-hand animation properties and omit "animation-delay". This
// only works because the default value for "animation-delay" is "0s".
@mixin animation($name, $duration, $timing, $delay, $count, $direction, $fill, $play: running) {
  @if ($delay != "0s") {
    animation: $name $duration $timing $delay $count $direction $fill;
  }
  @if ($delay == "0s") {
    animation-name: $name;
    animation-duration: $duration;
    animation-timing-function: $timing;
    animation-delay: $delay;
    animation-iteration-count: $count;
    animation-direction: $direction;
    animation-fill-mode: $fill;
  }
  // Must be declared separately for IE11
  animation-play-state: $play;
}

// This mixin adds css variables to elements while also falling back to our
// old rem() function for older browsers...so IE11
// To use this, put the property name in quotes, followed by the value
// Example: @include css-variables("font-size", 18);
@mixin css-variables($prop, $val) {
  // sass-lint:disable no-duplicate-properties
  #{$prop}: rem($val);
  #{$prop}: scalable-size($val);
  // sass-lint:enable no-duplicate-properties

}
