// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
// See LICENSE in the project root for license information.

// ---------------------------------------------------------------------

@import './libSupport/deprecated';

// The following mixins provide pre-configured Orion approved
// breakpoints when development mobile-first UIs.

/// Standard breakpoint to support resolutions greater than 1232px.
/// @example scss - import mixin file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
///   .foo {
///       @include auro_breakpoint--lg {
///         ...
///       }
///   }
@mixin auro_breakpoint--lg {
  @media screen and (min-width: $auro-breakpoint-lg) {
    @content;
  }
}


/// Standard breakpoint to support resolutions greater than 1024px.
/// @example scss - import mixin file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
///   .foo {
///       @include auro_breakpoint--md {
///         ...
///       }
///   }
@mixin auro_breakpoint--md {
  @media screen and (min-width: $auro-breakpoint-md) {
    @content;
  }
}

/// Standard breakpoint to support resolutions greater than 660px.
/// @example scss - import mixin file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Set breakpoint
///   .foo {
///       @include auro_breakpoint--sm {
///         ...
///       }
///   }
@mixin auro_breakpoint--sm {
  @media screen and (min-width: $auro-breakpoint-sm) {
    @content;
  }
}

/// Open format mixin to define any breakpoint.
///
/// See also: [Media_features](https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features)
///
/// Compatibility: [css-mediaqueries](https://caniuse.com/#feat=css-mediaqueries\)
/// @example scss - import mixin file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/breakpoints";
/// @group responsive
/// @example scss - Auro breakpoint tokens
///   $auro-breakpoint-sm: 660px;
///   $auro-breakpoint-md: 1024px;
///   $auro-breakpoint-lg: 1232px;
/// @param {string} $min [null] - sets `min-width` value
/// @param {string} $max [null] - sets `max-width` value
/// @param {list} $polar [null] - sets `min-width` and `max-width` values
/// @param {string} $cust [null] - allows for 100% custom breakpoint options
/// @example scss - Set breakpoint using `$min` argument
///   .foo {
///     color: orange;
///
///     @include auro_breakpoint($min: $auro-breakpoint-sm) {
///       color: blue;
///     }
///   }
/// @example scss - Set breakpoint using `$max` argument
///   .foo {
///     color: orange;
///
///     @include auro_breakpoint($max: $auro-breakpoint-lg) {
///       color: blue;
///     }
///   }
/// @example scss - Set breakpoint using `$polar` argument
///   .foo {
///     color: orange;
///
///     @include auro_breakpoint($polar: $auro-breakpoint-sm $auro-breakpoint-lg) {
///       color: blue;
///     }
///   }
/// @example scss - Set breakpoint using `$cust` argument. Interpolation `#{}` is required if you intend to use a variable within a string.
///   .foo {
///     color: orange;
///
///     @include auro_breakpoint($cust: '(min-width: 400px) and (max-width: #{$auro-breakpoint-sm})') {
///       color: blue;
///     }
///   }
@mixin auro_breakpoint($min: null, $max: null, $polar: null, $cust: null) {
  $breakpoints: null;

  @if $min {
    $breakpoints: '(min-width: #{$min})';
  } @else if $max {
    $breakpoints: '(max-width: #{$max})';
  } @else if $polar {
    $breakpoints: '(min-width: #{nth($polar, 1)}) and (max-width: #{nth($polar, 2)})';
  } @else if $cust {
    $breakpoints: #{$cust};
  }

  @media screen and #{$breakpoints} {
    @content;
  }
}