// 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';
@import '../libSupport/manageScope';

// sass-lint:disable mixins-before-declarations variable-for-property

@import '../utilityVariables/important';

/// Utility class to restrain visibility of UI element to __sm__ users only.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-smOnly {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-smOnly {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-smOnly {}
///

#{$scope}.#{$prefix}util_is-smOnly {
  @if variable-exists(ds-grid-breakpoint-sm) {
    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
      display: none $important;
    }
  }
}

/// Utility class to restrain `block` visibility of UI element between __sm__ and __md__ screens.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-mdOnly {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-mdOnly {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-mdOnly {}
///

#{$scope}.#{$prefix}util_is-mdOnly {
  @if variable-exists(ds-grid-breakpoint-sm) {
    display: none $important;

    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
      display: block $important;
    }
    @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
      display: none $important;
    }
  }
}

/// Utility class to restrain `inline-block` visibility of UI element between __sm__ and __md__ screens.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-mdOnly--inline {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-mdOnly--inline {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-mdOnly--inline {}
///
#{$scope}.#{$prefix}util_is-mdOnly--inline {
  @if variable-exists(ds-grid-breakpoint-sm) {
    display: none $important;

    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
      display: inline-block $important;
    }
    @include auro_breakpoint($min: $ds-grid-breakpoint-md) {
      display: none $important;
    }
  }
}

/// Utility class to restrain `block` visibility of UI element for __md__ screens.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-mdAppears {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-mdAppears {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-mdAppears {}
///

#{$scope}.#{$prefix}util_is-mdAppears {
  @if variable-exists(ds-grid-breakpoint-sm) {
    display: none $important;

    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
      display: block $important;
    }
  }
}

/// Utility class to restrain `block` visibility of UI element for __md__ screens.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-mdAppears--inline {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-mdAppears--inline {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-mdAppears--inline {}
///

#{$scope}.#{$prefix}util_is-mdAppears--inline {
  @if variable-exists(ds-grid-breakpoint-sm) {
    display: none $important;

    @include auro_breakpoint($min: $ds-grid-breakpoint-sm) {
      display: inline-block $important;
    }
  }
}

/// Utility class to restrain `block` visibility of UI element for __lg__ screens.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-lgOnly {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-lgOnly {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-lgOnly {}
///
#{$scope}.#{$prefix}util_is-lgOnly {
  @if variable-exists(ds-breakpoint-lg) {
    display: none $important;

    @include auro_breakpoint($min: $ds-breakpoint-lg) {
      display: block $important;
    }
  }
}

/// Utility class to restrain `block` visibility of UI element for __lg__ screens.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import mixin file and selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_is-lgOnly--inline {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_is-lgOnly--inline {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_is-lgOnly--inline {}
///

#{$scope}.#{$prefix}util_is-lgOnly--inline {
  @if variable-exists(ds-breakpoint-lg) {
    display: none $important;

    @include auro_breakpoint($min: $ds-breakpoint-lg) {
      display: inline-block $important;
    }
  }
}


/// Utility class that will allow img src to fill 100% of space for responsive characteristics
///
/// See [variable use](/#utility-variable-important) for managing the `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-responsive
/// @example scss - import selector partial file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive";
///
/// @example scss - Default selector(s)
///   .util_img-is-responsive {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_img-is-responsive {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_img-is-responsive {}
///
/// @example html - Example HTML selector use
///   <img class="util_img-is-responsive" src=" ... " alt="" />
///
#{$scope}.#{$prefix}util_img-is-responsive {
  width: 100% $important;
}