@import "mixins.deprecated";

/// A simple clearfix helper
@mixin clearfix {
  &::after {
    clear: both;
    content: " ";
    display: table;
  }
}

/// Providing an image width and height, provides the correct aspect ratio via padding-bottom %
/// This should be used with an element of a height of 0, so that the height is determined by the padding-bottom
/// rather than the element's height property
/// @param {number} $image-width - The width of the image
/// @param {number} $image-height - The height of the image
@mixin best-fit-padding($image-width, $image-height) {
  $ratio-percentage: ($image-height / $image-width) * 100%;
  padding-bottom: $ratio-percentage;
}

/// Hack to force GPU rendering (most in the community argue this should be used quite sparingly!)
@mixin hardware-acceleration() {
  transform: translateZ(0);
  z-index: z("default");
}

/// Standard divider used between sections
@mixin divider($position: bottom) {
  @if $position == bottom {
    border-bottom: .1rem solid $color-gray;
  } @else if $position == top {
    border-top: .1rem solid $color-gray;
  }
}

/// Style the author's image
/// @param {string} $breakpoint
/// @param {string} $orientation ["vertical"] - "vertical" or "horizontal"
@mixin author-image($breakpoint, $orientation: "vertical") {
  border-radius: 100%;
  display: inline-block;
  max-width: 4rem;
  vertical-align: middle;
  width: 12vw;

  @if $orientation == "vertical" {
    margin-bottom: 1.3rem;
  }

  @media (min-width: $breakpoint) {
    max-width: none;
    width: 8rem;

    @if $orientation == "vertical" {
      margin-bottom: 3rem;
    }
  }
}

/// Style the author's credentials
/// @param {string} $breakpoint
@mixin author-creds($breakpoint) {
  display: block;
  text-align: center;
  vertical-align: middle;
}

/// Style the author's name
/// @param {string} $breakpoint
@mixin author-name($breakpoint) {
  color: $titlegray;
  font: {
    size: 4vw;
    weight: $font-weight-semibold;
  }
  line-height: 1;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: .06rem;

  @media (min-width: $breakpoint) {
    font-size: 1.2rem;
  }
}

/// Style an author's Title
/// @param {string} $breakpoint
@mixin author-title($breakpoint) {
  color: $light-text-color;
  font: {
    family: $miller-daily;
    size: 4vw;
    style: italic;
  }
  letter-spacing: .06rem;
  line-height: 1;

  @media (min-width: $breakpoint) {
    font-size: 1.4rem;
  }
}

/// Used for the see more links at the bottom of components
/// @example sass
/// .survival_guide__button-container {
///   @include see-more-link;
/// }
@mixin see-more-link {
  font-size: 1.4rem;
  margin-top: 4rem;
  position: relative;
  text-align: center;
}

// -----------------------------------------------------------------------------
// CSS Arrow
// -----------------------------------------------------------------------------

@mixin css-arrow($side: top, $size: 2rem, $offset: 0) {
  &::after {
    height: $size;
    width: $size;

    @if $side == top {
      bottom: auto;
      left: $offset;
      top: -(.7 * $size);
    }

    @if $side == right {
      left: auto;
      right: -(.65 * $size);
      top: $offset;
    }

    @if $side == bottom {
      bottom: -(.6 * $size);
      left: $offset;
      top: auto;
    }

    @if $side == left {
      left: -(.6 * $size);
      right: auto;
      top: $offset;
    }
  }
}

/// Placeholder
///
/// Outputs vendor-prefixed placeholders for styling. Must be nested in a
/// rule-set.
///
/// @example scss - Usage
/// input {
///   @include placeholder {
///     color: #999;
///   }
/// }
@mixin placeholder {
  $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";

  @each $placeholder in $placeholders {
    &:#{$placeholder}-placeholder {
      @content;
    }
  }
}

/// Visually Hidden
///
/// Hide only visually, but have it available for screen readers
/// http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
@mixin visuallyhidden($focusable: "") {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;

  @if $focusable == "focusable" {
    // Extends the .visuallyhidden class to allow the element to be focusable
    // when navigated to via the keyboard: https://www.drupal.org/node/897638

    &:active,
    &:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
    }
  }
}

@mixin dropdown-menu($top, $left, $width, $margin-left, $padding-top: $gutter) {
  background-color: $color-white;
  border-radius: $radius;
  box-shadow: 0 -1rem 2rem rgba($color-black, 0);
  color: $titlegray;
  display: block;
  font-size: $font-size;
  left: $left;
  line-height: $line-height;
  margin-left: $margin-left;
  opacity: 0;
  padding-top: $padding-top;
  pointer-events: none;
  position: absolute;
  top: $top;
  transform: translateY(1rem);
  transition: opacity $animation-speed,
    transform $animation-speed,
    box-shadow ($animation-speed-ui * 1.5),
    visibility $animation-speed;
  visibility: hidden;
  width: $width;
  z-index: z("global-header") + 1;
}

@mixin dropdown-menu-visible {
  box-shadow: 0 3rem 9rem rgba($color-black, .4);
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
  visibility: visible;
}

@mixin dropdown-menu-arrow($size: 1.6rem, $left: 50%) {
  border: ($size / 2) solid transparent;
  border-bottom-color: $color-white;
  content: "";
  display: block;
  height: 0;
  left: $left;
  margin-left: -($size / 2);
  position: absolute;
  top: -($size);
  width: 0;
}

/// Includes a form control
/// @param {String} $type ["text"] - The input type of the control; accepts "text" or "select"
/// @example scss
///   textarea,
///   input[type="text"] {
///     @include form-control;
///   }
///
///   select {
///     @include form-control("select");
///   }
@mixin form-control($type: "text") {
  appearance: none;
  background-color: $color-white;
  border: .1rem solid darken($color-white, 17);
  border-radius: .2rem;
  color: rgba($titlegray, .72);
  font-size: 1.3rem;
  height: auto;
  outline: 0;
  padding: $spacing $spacing 1.1rem;
  transition: border-color ($animation-speed / 2);
  width: 100%;

  @if $type == "text" {
    @include placeholder {
      color: $font-color-light;
    }
  }

  @if $type == "select" {
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAICAYAAACCuR0hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjhGQzc5MkNGMDM4MTFFNDlCOTE5QTczMjQ3MjgzMTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjhGQzc5MkRGMDM4MTFFNDlCOTE5QTczMjQ3MjgzMTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1MDA1QkRGRkYwMjQxMUU0OUI5MTlBNzMyNDcyODMxNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1MDA1QkUwMEYwMjQxMUU0OUI5MTlBNzMyNDcyODMxNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PiH5FUMAAAB7SURBVHjaYkwvqZnGwMCQyUAamA7EWSDGjO5mBnoCJiDOBeJNJOjZBNUzIADk4L9AHAnEJ4lQfxKq9u9AOhgEvgGxLxDfwaP2DlTNN4YBBExI7NdA7Aml0QE+uQFzMK5QJCb0B8zB6OmUlPRNF8BCoCRgIbEEoTkACDAA8w0eWK8rNGMAAAAASUVORK5CYII=");
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 2.2rem .4rem;
    cursor: pointer;
    font-weight: 600;
  }

  &:focus {
    border-color: darken($color-gray, 20%);
  }
}

/// Apply to a `:before` or `:after` psuedo element to create a soft fade on an
/// edge. Typically used to hide overflow and therefore best used with
/// `overflow: hidden;` and `white-space: nowrap;`.
/// @param {String} $side          - left or right
/// @param {String} $offset [0]    - Amount of offset
/// @param {String} $width  [3rem] - Width of the fade
/// @example scss
///   .text {
///     color: #333;
///     font-size: 1em;
///     overflow: hidden;
///     white-space: nowrap;
///     width: 400px;
///
///     &:after {
///       @include fade-edge("right");
///     }
///   }
@mixin fade-edge($side: "right", $offset: 0, $width: 3rem, $color: $color-white) {
  background-image: linear-gradient(to left, $color 0%, rgba($color, 0) 100%);
  bottom: 0;
  content: "";
  height: 100%;
  position: absolute;
  #{$side}: #{$offset};
  top: 0;
  width: $width;
}

@mixin alert-background($color: "default") {
  background-color: map-get($alert-colors, $color);
}

@mixin pop-out {
  background-color: rgba($color-black, .6);
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAxNiAxNiI+CiAgPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTYuMiw5LjFMMSwxNC4zdi0zLjhDMSwxMC4yLDAuOCwxMCwwLjUsMTBDMC4yLDEwLDAsMTAuMiwwLDEwLjV2NWMwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMAogICAgYzAsMC4xLDAuMSwwLjIsMC4xLDAuM2MwLDAsMCwwLDAsMGMwLDAsMCwwLDAsMEMwLjIsMTUuOSwwLjQsMTYsMC41LDE2YzAsMCwwLDAsMCwwaDVDNS44LDE2LDYsMTUuOCw2LDE1LjVDNiwxNS4yLDUuOCwxNSw1LjUsMTUKICAgIEgxLjdsNS4yLTUuMmMwLjItMC4yLDAuMi0wLjUsMC0wLjdDNi43LDksNi4zLDksNi4yLDkuMXogTTE2LDAuNWMwLTAuMS0wLjEtMC4yLTAuMS0wLjNjMCwwLDAsMCwwLDBzMCwwLDAsMAogICAgQzE1LjgsMC4xLDE1LjYsMCwxNS41LDBjMCwwLDAsMCwwLDBoLTVDMTAuMiwwLDEwLDAuMiwxMCwwLjVDMTAsMC44LDEwLjIsMSwxMC41LDFoMy44TDkuMSw2LjJjLTAuMiwwLjItMC4yLDAuNSwwLDAuNwogICAgYzAuMiwwLjIsMC41LDAuMiwwLjcsMEwxNSwxLjd2My44QzE1LDUuOCwxNS4yLDYsMTUuNSw2QzE1LjgsNiwxNiw1LjgsMTYsNS41TDE2LDAuNUMxNiwwLjUsMTYsMC41LDE2LDAuNXoiLz4KPC9zdmc+Cg==");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 1.6rem;
  border-radius: .4rem;
  display: block;
  height: 2.4rem;
  transition: background-color $animation-speed linear;
  width: 2.4rem;

  &:hover,
  &:active,
  &:focus {
    background-color: rgba($color-black, .9);
  }
}

/// Clamps multi-line text
/// @param {Value}          $font-size           - Font size of the text
/// @param {Unitless Value} $line-height         - Line height of the text; **must be a unitless value**
/// @param {Number}         $lines-to-show       - Number of lines to show
/// @example scss
/// p {
///   @include line-clamp($font-size: 16px, $line-height: 1.5, $lines-to-show: 3);
/// }
@mixin line-clamp(
  $font-size,
  $line-height,
  $lines-to-show
) {
  @if unitless($line-height) == false {
    $line-height: create-unitless-line-height($font-size, $line-height);
  }

  -webkit-box-orient: vertical;
  display: block; // Fallback for non-webkit browsers
  display: -webkit-box;
  height: ($font-size * $line-height * $lines-to-show); // Fallback for non-webkit browsers
  -webkit-line-clamp: $lines-to-show;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;

  // Fallback for non-webkit browsers
  &::after {
    background-color: $color-white;
    bottom: 0;
    content: "\2026";
    position: absolute;
    text-align: left;
    width: 100%;
  }
}

@mixin lede {
  color: $darkgray;
  font-size: 1.8rem;
  font-weight: 300;
  line-height: (28 / 18);
  margin-bottom: 2.5rem;

  @media (min-width: $min-480) {
    font-size: 2rem;
  }

  @media (min-width: $min-600) {
    font-size: 2.8rem;
    line-height: (42 / 28);
    margin-bottom: 5.5rem;
  }
}

@mixin post-date {
  color: $light-text-color;
  font-family: $benton-sans;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

// !important is needed to override specificity in article-body__content
@mixin copy-caption {
  font-family: $benton-sans !important;
  font-size: 1.1rem !important;
  line-height: 1.4 !important;
  text-align: center !important;

  @media (min-width: $min-600) {
    font-size: 1.2rem !important;
    line-height: 1.6 !important;
  }
}

/// ----------------------------------------------------------------------------
/// Use to separate components on the page.
/// ### Modifiers
/// * `--grey` modifier to change the background color
///
/// @example css
/// .segment {
///   @include segment();
/// }
/// ----------------------------------------------------------------------------
@mixin segment() {
  margin: 0;
  padding-bottom: ($gutter * 2) - $spacing;
  padding-top: ($gutter * 2);

  @media (min-width: $min-720) {
    padding-bottom: ($gutter * 3) - $spacing;
    padding-top: ($gutter * 3);
  }

  @media (min-width: $min-1080) {
    padding-bottom: ($gutter * 4.5) - $spacing;
    padding-top: ($gutter * 4.5);
  }

  &--grey {
    background-color: darken($color-white, 4);
  }

  &--border-bottom::after,
  &--border-top::before {
    box-sizing: content-box;
    content: "";
    display: block;
    height: 0;
    margin-left: ($gutter / 2);
    margin-right: ($gutter / 2);
    max-width: $max-width;
    position: relative;

    @media (min-width: $min-480) {
      margin-left: $gutter;
      margin-right: $gutter;
    }

    @media (min-width: $min-1080) {
      margin-left: ($gutter * 2);
      margin-right: ($gutter * 2);
    }

    @media (min-width: #{strip-units(($max-width + ($gutter * 4)) * .625)}em) {
      margin-left: auto;
      margin-right: auto;
    }
  }

  &--border-bottom:last-of-type::after {
    border-bottom: 0;
  }

  &--border-top:last-of-type::after {
    border-top: 0;
  }

  &--border-bottom::after {
    border-bottom: .1rem solid $color-gray;
    bottom: -($gutter * 2) + $spacing;

    @media (min-width: $min-480) {
      bottom: -($gutter * 3) + $spacing;
    }

    @media (min-width: $min-1080) {
      bottom: -($gutter * 3.5) + $spacing;
    }
  }

  &--border-top::before {
    border-top: .1rem solid $color-gray;
    top: -($gutter * 2);

    @media (min-width: $min-480) {
      top: -($gutter * 3);
    }

    @media (min-width: $min-1080) {
      top: -($gutter * 4);
    }
  }
}

@mixin container-header {
  @include container;
  margin-left: (gutter(static) / 2);
  margin-right: (gutter(static) / 2);

  @media (min-width: $min-720) {
    margin-left: gutter(static);
    margin-right: gutter(static);
  }

  @media (min-width: $min-1080) {
    margin-left: (gutter(static) * 2);
    margin-right: (gutter(static) * 2);
  }

  @media (min-width: $min-1410) {
    margin-left: auto;
    margin-right: auto;
  }
}

/// ----------------------------------------------------------------------------
/// Extends Susy by returning a container with gutters; requires
/// [Susy](http://susy.oddbird.net/).
///
/// Includes Susy's container mixin.
///
/// Should be used for the outermost container.
///
/// ### Modifiers (deprecated)
/// * `--slim` removes the gutters
/// * `--narrow` smaller width
/// * `--half` half of the max width
/// ----------------------------------------------------------------------------
@mixin container-padded {
  // Include Susy's container mixin
  @include container;

  // Tell Susy to use static values
  @include with-layout(static) {
    // Calculate the width of the container plus each gutter (doubled) and then
    // convert the value to ems for use in the media query.
    $max-width: container() + gutter-quad();
    $media-query: #{(strip-units($max-width) * .625)}em;

    @media (max-width: $max-480) {
      padding-left: gutter-half();
      padding-right: gutter-half();
    }

    @media (min-width: $min-480) {
      margin-left: gutter();
      margin-right: gutter();
    }

    @media (min-width: $min-1080) {
      margin-left: gutter-double();
      margin-right: gutter-double();
    }

    @media(min-width: $media-query) {
      margin-left: auto;
      margin-right: auto;
    }

    // These modifiers are deprecated as it's easy enough to use Susy's span
    // function to calculate widths on demand.
    &--slim {
      max-width: span(10); // $max-width - 12rem - ($gutter * 2)
    }

    &--narrow {
      max-width: span(9); // ($max-width - $min-width)
    }

    &--half {
      max-width: span(6); // ($max-width / 2)
    }
  }
}

/// ----------------------------------------------------------------------------
/// Extends Susy by returning a static width container with optional gutters;
/// requires [Susy](http://susy.oddbird.net/).
///
/// @param  {Number} $span                      - Number of columns to span
/// @param  {String} $position [inside]|outside - Inside: wrapped; outside:
///                                               wrapping (see @example)
/// @example:
/// ```scss
/// // position: inside (default)
/// .outer-container {
///   // Include Susy's default container for the outermost container
///   @include container;
///
///   .inner-container {
///     // Include the static-container mixin that spans 6 columns and is inside
///     // of another container; since 'inside' is default, the argument
///     // doesn't need to be passed.
///     @include container-static(6);
///   }
/// }
///
/// // position: outside
/// .outer-container {
///   // Include the static container mixin that spans 6 columns and is the
///   // outermost container. When set to 'outside', Susy's default container
///   // mixin will be included.
///   @include container-static(6, outside);
/// }
/// ----------------------------------------------------------------------------
@mixin container-static($span, $position: inside) {
  // Include Susy's container mixin if the static container is positioned on the
  // outside, i.e., wrapping.
  @if $position == outside {
    @include container;
  }

  // Tell Susy to use static values
  @include with-layout(static) {
    // Calculate the width of the container plus each gutter and then convert
    // the value to ems for use in the media query.
    $max-width: span($span) + gutter-double();
    $mq: #{(strip-units($max-width) * .625)}em;

    // Add horizontal margins if the static contained is positioned on the
    // outside, i.e., wrapping.
    @if $position == outside {
      margin-left: gutter();
      margin-right: gutter();
    }

    @media(min-width: $mq) {
      // Reset the horizontal margins to center the static container if it's
      // positioned on the outside, i.e., wrapping.
      @if $position == outside {
        margin-left: auto;
        margin-right: auto;
      }

      // Set a static width with Susy's `span` function
      width: span($span);
    }
  }
}

/// Use in an icon to add it to the before selector
/// @param {string} $uri The icon uri to add
@mixin icon-before($uri) {
  &::before {
    background: {
      image: url($uri);
      position: center -94px;
      repeat: no-repeat;
      size: 50%;
    }
    content: "";
    display: block;
    height: 59px;
    position: relative;
    width: 82px;
  }
}

/// Mixin for main headers
// TODO: Rename this because it's not always being used as an actual `h1`
@mixin h1($margin-bottom: $gutter * 2, $color: $titlegray) {
  color: $color;
  font-family: $benton-sans;
  font-size: 2.8rem;
  font-weight: 100;
  line-height: 1.3;
  margin-bottom: $margin-bottom;
  margin-top: 0;
  padding-bottom: $spacing;
  position: relative;
  text-align: center;

  &::after {
    border-bottom: .2rem solid $color-red;
    bottom: 0;
    content: "";
    display: block;
    left: 50%;
    margin-left: (-3rem / 2);
    position: absolute;
    width: 3rem;
  }

  @media (min-width: $min-720) {
    font-size: 4.5rem;
  }
}

@mixin h2() {
  font-size: 1.8rem;
}

@mixin h3() {
  font-size: 1.4rem;
}

// Very basic navigation header for Destinations sub-pages, i.e. photo credits
@mixin narrative-nav() {
  text-align: left;
  max-width: $max-width;
  margin: $gutter auto 0;
  padding-bottom: 2.5rem;
  text-transform: uppercase;
  border-bottom: .1rem solid $color-gray;

  [class*="icon-chevron"] {
    font-size: .7rem;
    font-weight: 600;
    line-height: (5 / 7);
    margin-right: .8rem;
    vertical-align: 35%;
  }
}

@mixin details-header() {
  @include container;
  padding-bottom: .44rem;
  padding-top: 4.4rem;
  position: relative;

  @media (min-width: $min-720) {
    padding-bottom: 4.2rem;
    padding-top: 12rem;
  }

  &.is-narrow {
    @include with-layout(static) {
      max-width: span(10);
    }
  }

  &.has-flexbox {
    display: flex;
    flex-direction: column-reverse;
  }

  &.is-centered {
    text-align: center;
  }

  &__title {
    line-height: 1;

    &.is-xlarge {
      color: $darkgray;
      font-size: 3rem;
      font-weight: 600;
      letter-spacing: -.1rem;
      line-height: (36 / 30);

      @media (min-width: $min-600) {
        font-size: 6.4rem;
        line-height: (70 / 64);
      }
    }

    &.is-small {
      color: $detail-header-small-color;
      font-size: 1.4rem;
      font-weight: 400;
      letter-spacing: .1rem;

      @media (min-width: $min-480) {
        font-size: 1.6rem;
      }

      @media (min-width: $min-560) {
        display: inline-block;
      }

      @media (min-width: $min-600) {
        font-size: 1.8rem;
      }
    }

    &.is-xsmall {
      color: $color-red;
      font-size: 1.1rem;
      font-weight: 600;
      text-transform: uppercase;

      @media (min-width: $min-560) {
        display: inline-block;
      }

      @media (min-width: $min-600) {
        font-size: 1.3rem;
      }
    }

    &.is-padded-bottom {
      margin-bottom: 1.4rem;

      @media(min-width: $min-600) {
        margin-bottom: 3.9rem;
      }
    }
  }
}

@mixin link-transition() {
  transition-duration: 300ms;
  transition-property: color, border, background;

  &::after,
  &::before {
    transition-duration: 300ms;
    transition-property: color, border, background;
  }

  &:hover {
    transition-duration: 0;

    &::after,
    &::before {
      transition-duration: 0;
    }
  }
}

@mixin more() {
  @include link-transition();
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;

  &:hover {
    color: $lpblue + 30;
  }

  [class*="icon-"] {
    backface-visibility: hidden;
    display: inline-block;
    font-size: 6px;
    line-height: 1.6;
    transform: translateX(6px);
    transition: transform 500ms;
    vertical-align: 20%;
  }

  &:hover {
    [class*="icon-"] {
      transform: translateX(.2rem);
    }
  }
}

@mixin see-more() {
  @include more();
  display: inline-block;
  padding: $gutter;
  position: relative;

  &--small {
    font-size: 1rem;
  }
}

/// Provides the underline for the `underlined-link` mixin
/// @param {Color} $color [$lpblue]  - Color of the underline, usually the same as the text color
/// @param {Dimension} $offset [2px] - Amount of padding above the underline
/// @param {Dimension} $weight [1px] - Width of the underline
@mixin underline(
  $color: $lpblue,
  $offset: 2px,
  $weight: 1px
) {
  background-image: linear-gradient(
    to top,
    transparent,
    transparent $offset,
    $color $offset,
    $color ($offset + $weight),
    transparent ($offset + $weight)
  );
}

/// Creates a nicely underlined hyperlink
/// @param {Color} $link-color [$lpblue] Link color
/// @param {Color} $link-color-active [$lpblue + 30] Link color for hover, active and focus states
/// @param {Color} $background-color [$color-white] Background color of the link, usually the same color as the page
/// @param {Boolean} $breaking-underlines [true] If the underline should "break" as it passes thru a descender
@mixin underlined-link(
  $link-color: $lpblue,
  $link-color-active: $lpblue + 30,
  $underline-offset: 2px,
  $background-color: $color-white,
  $breaking-underlines: true
) {
  @include underline(rgba($link-color, .4), $underline-offset);
  color: $link-color;
  position: relative;
  text-decoration: none;
  transition: color 200ms ease;

  @if $breaking-underlines {
    text-shadow: -1px -1px 0 $background-color,
      1px -1px 0 $background-color,
      -1px 1px 0 $background-color,
      1px 1px 0 $background-color;
  }

  // @TODO Figure out why these styles don't work
  // @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  //   @include underline(rgba($link-color, .4), $underline-offset, .5);
  // }

  &:hover,
  &:active,
  &:focus {
    @include underline(rgba($link-color-active, .4), $underline-offset);
    color: $link-color-active;

    // @TODO Figure out why these styles don't work
    // @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
    //   @include underline(rgba($link-color-active, .4), $underline-offset, .5);
    // }
  }
}

@mixin button($type: "") {
  appearance: none;
  backface-visibility: hidden;
  border: 0;
  border-radius: 2.2rem;
  cursor: pointer;
  display: inline-block;
  font-size: 1.2rem;
  -webkit-font-smoothing: antialiased;
  font-weight: 600;
  line-height: 1;
  padding: 1.8rem 3rem 1.4rem;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: color $animation-speed, border $animation-speed, background-color $animation-speed;
  vertical-align: middle;
  white-space: nowrap;

  @if $type == "" {
    background-color: $lpblue;
    color: $color-white;
  }

  @if $type == "inverse" {
    background-color: $color-white;
    color: $lpblue;
  }

  [class*="icon-"] {
    display: inline-block;
    font-size: 6px;
    margin-left: .6rem;
    transform: translate3d(0, 0, 0);
    transition: transform 500ms;
    vertical-align: 20%;
  }

  &:hover,
  &:focus {
    text-decoration: none;

    @if $type == "" {
      background-color: $lpblue + 15;
      color: $color-white;
    }

    @if $type == "inverse" {
      background-color: $color-white;
      color: $lpblue + 30;
    }

    [class*="icon-"] {
      transform: translate3d(-.4rem, 0, 0);
    }

    .icon-chevron-right {
      transform: translate3d(.4rem, 0, 0);
    }

    .icon-chevron-down {
      transform: translate3d(0, 0, 0);
    }
  }
}

// Creates the base for the marker object. A size modifier is required to apply
// proper dimensions and font size.
@mixin marker {
  backface-visibility: hidden;
  color: $titlegray;
  display: inline-block;
  font-family: $miller-daily;
  position: relative;
  text-align: center;
  z-index: z("default");

  // For CSS counter
  &::before {
    color: inherit;
    position: relative;
  }

  // Create diamond shape
  &::after {
    background-color: $color-white;
    box-shadow: .2rem .2rem .2rem rgba($color-black, .18);
    content: "";
    display: block;
    height: 100%;
    position: relative;
    transform: rotate(45deg);
    width: 100%;
    z-index: z("below");
  }
}

// Extends marker. Creates a small marker.
@mixin marker-small {
  $marker-small-size: 2.5rem;
  $marker-small-font-size: 1.4rem;
  font-size: $marker-small-font-size;
  height: $marker-small-size;
  line-height: $marker-small-size;
  width: $marker-small-size;

  // For CSS counter
  &::before {
    font-size: $marker-small-font-size;
  }

  // Adjust diamond shape
  &::after {
    border-radius: .4rem;
    margin-top: -$marker-small-size;
  }
}

// Extends marker. Creates a large marker.
@mixin marker-large {
  $marker-large-size: 3.6rem;
  $marker-large-font-size: 2rem;
  font-size: $marker-large-font-size;
  height: $marker-large-size;
  line-height: $marker-large-size;
  width: $marker-large-size;

  // For CSS counter
  &::before {
    font-size: $marker-large-font-size;
  }

  // Adjust diamond shape
  &::after {
    border-radius: .6rem;
    margin-top: -$marker-large-size;
  }
}

// Extends marker. By default, positions the marker over an 80px wide photo.
// Pass in an offset if the photo width is not 80px.
// @param {String} $offset [6.7rem] Amount to offset the marker from the left edge
@mixin marker-place($offset: 6.7rem) {
  left: $offset;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

@mixin slider-button {
  background-color: $color-white;
  border-radius: 50%;
  color: $titlegray;
  display: block;
  height: 5rem;
  position: absolute;
  top: 50%;
  width: 5rem;
  z-index: z("middle") + 5;

  @media (min-width: $min-480) {
    height: 6rem;
    width: 6rem;
  }

  @media (min-width: $min-720) {
    box-shadow: 0 .2rem 1rem .15rem rgba($color-black, .07);
  }

  @media (max-width: $max-840) {
    transform: translateY(-50%);
  }

  @media (min-width: $min-840) {
    height: 4rem;
    transition: box-shadow $animation-speed ease-in-out;
    width: 4rem;
  }

  &:hover,
  &:active,
  &:focus {
    color: $lpblue;

    @media (min-width: $min-840) {
      box-shadow: 0 .2rem 1rem .15rem rgba($color-black, .1);
    }
  }

  &[disabled] {
    opacity: 0;
    pointer-events: none;
  }
}

@mixin slider-button-icon {
  color: currentColor;
  font-size: 1.1rem;
  font-weight: 700;
  position: relative;
  transition: color $animation-speed ease-in-out;

  @media (min-width: $min-840) {
    font-size: .9rem;
  }
}

@mixin slider-button-icon-next {
  right: .3rem;

  @media (min-width: $min-720) {
    right: -.1rem;
  }
}

@mixin slider-button-icon-prev {
  left: .3rem;

  @media (min-width: $min-720) {
    left: -.1rem;
  }
}

// 1. Flow with text content
// 2. Inherit the parent text color
// 3. Use the parent font-size for width and height
// 4. Vertically align icon with adjacent text
@mixin svg-icon {
  display: inline-block; // 1
  fill: currentColor; // 2
  height: 1em; // 3
  vertical-align: middle; // 4
  width: 1em; // 3
}

// Align more nicely with capital letters
@mixin svg-icon-inline {
  position: relative;
  top: -.0625em;
}

@mixin svg-icon-fit {
  height: 100%;
  width: 100%;
}

@mixin svg-icon-small {
  height: 1.6rem;
  width: 1.6rem;
}

@mixin svg-icon-tiny {
  height: .6rem;
  width: .6rem;
}