@charset "utf-8";
// Copyright 2019, Oath Inc.
// Licensed under the terms of the MIT license. See LICENSE file in project root for terms.


// Breakpoint Variables
// XS
$mobile: 0px;
$mobile-end: 599px;
// SM
$tablet: 600px;
$tablet-end: 899px;
// MD
$small-desktop: 900px;
$small-desktop-end: 1199px;
// LG
$desktop: 1200px;
$desktop-end: 1439px;
// XL
$hd: 1440px;
$hd-end: 3000px;

// Direction up
@mixin media-size-up($size) {
  // Moblie
  @if $size == mobile {
    @media (min-width: $mobile) { @content; }
  }
  // Tablet
  @if $size == tablet {
    @media (min-width: $tablet) { @content; }
  }
  // Small Desktop
  @else if $size == small-desktop {
    @media (min-width: $small-desktop) { @content; }
  }
  // Desktop
  @else if $size == desktop {
    @media (min-width: $desktop) { @content; }
  }  // HD
  @else if $size == hd {
    @media (min-width: $hd) { @content; }
  }
}

// Direction down
@mixin media-size-down($size) {
  // Mobile XS
  @if $size == mobile {
    @media (max-width: $mobile-end) { @content; }
  }
  // Tablet SM
  @else if $size == tablet {
    @media (max-width: $tablet-end) { @content; }
  }
  // Small Desktop MD
  @else if $size == small-desktop {
    @media (max-width: $small-desktop-end) { @content; }
  }
  // Desktop LG
  @else if $size == desktop {
    @media (max-width: $desktop-end) { @content; }
  }
}

// Only
@mixin media-size-only($size) {
  // Mobile XS
  @if $size == mobile {
    @media (min-width: $mobile) and (max-width: $mobile-end) { @content; }
  }
  // Tablet SM
  @else if $size == tablet {
    @media (min-width: $tablet) and (max-width: $tablet-end) { @content; }
  }
  // Small Desktop MD
  @else if $size == small-desktop {
    @media (min-width: $small-desktop) and (max-width: $small-desktop-end) { @content; }
  }
  // Desktop LG
  @else if $size == desktop {
    @media (min-width: $desktop) and (max-width: $desktop-end) { @content; }
  }
  // Desktop LG
  @else if $size == hd {
    @media (min-width: $hd) { @content; }
  }
}

// Between
@mixin media-size-between($start, $end) {
  // Start
  // Mobile XS
  @if $start == mobile and $end == mobile {
    @media (min-width: $mobile) and (max-width: $mobile-end) { @content; }
  }
  @else if $start == mobile and $end == tablet {
    @media (min-width: $mobile) and (max-width: $tablet-end) { @content; }
  }
  @else if $start == mobile and $end == small-desktop {
    @media (min-width: $mobile) and (max-width: $small-desktop-end) { @content; }
  }
  @else if $start == mobile and $end == desktop {
    @media (min-width: $mobile) and (max-width: $desktop-end) { @content; }
  }
  @else if $start == mobile and $end == hd {
    @media (min-width: $mobile) and (max-width: $hd-end) { @content; }
  }
  // Tablet SM
  @else if $start == tablet and $end == tablet {
    @media (min-width: $tablet) and (max-width: $tablet-end) { @content; }
  }
  @else if $start == tablet and $end == small-desktop {
    @media (min-width: $tablet) and (max-width: $small-desktop-end) { @content; }
  }
  @else if $start == tablet and $end == desktop {
    @media (min-width: $tablet) and (max-width: $desktop-end) { @content; }
  }
  @else if $start == tablet and $end == hd {
    @media (min-width: $tablet) and (max-width: $hd-end) { @content; }
  }
  // Small Desktop MD
  @else if $start == small-desktop and $end == small-desktop {
    @media (min-width: $small-desktop) and (max-width: $small-desktop-end) { @content; }
  }
  @else if $start == small-desktop and $end == desktop {
    @media (min-width: $small-desktop) and (max-width: $desktop-end) { @content; }
  }
  @else if $start == small-desktop and $end == hd {
    @media (min-width: $small-desktop) and (max-width: $hd-end) { @content; }
  }
  // Desktop LG
  @else if $start == desktop and $end == desktop {
    @media (min-width: $desktop) and (max-width: $desktop-end) { @content; }
  }
  @else if $start == desktop and $end == hd {
    @media (min-width: $desktop) and (max-width: $hd-end) { @content; }
  }
  // HD XL
  @else if $start == hd and $end == hd {
    @media (min-width: $hd) and (max-width: $hd-end) { @content; }
  }
}