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

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

@use '../libSupport/deprecated';
@use '../libSupport/manageScope';

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

@use '../utilityVariables/important';
@use "../breakpoints" as breakpoints;
@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables" as *;

/// 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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///

#{manageScope.$scope}.#{manageScope.$prefix}util_is-smOnly {
  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) {
    display: none important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///

#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly {
  display: none important.$important;

  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) {
    display: block important.$important;
  }
  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-md) {
    display: none important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///
#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdOnly--inline {
  display: none important.$important;

  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) {
    display: inline-block important.$important;
  }
  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-md) {
    display: none important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///

#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears {
  display: none important.$important;

  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) {
    display: block important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///

#{manageScope.$scope}.#{manageScope.$prefix}util_is-mdAppears--inline {
  display: none important.$important;

  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-sm) {
    display: inline-block important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///
#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly {
  display: none important.$important;

  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-lg) {
    display: block important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints" as *;
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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 {}
///

#{manageScope.$scope}.#{manageScope.$prefix}util_is-lgOnly--inline {
  display: none important.$important;

  @include breakpoints.auro_breakpoint($min: $ds-grid-breakpoint-lg) {
    display: inline-block important.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/responsive" as *;
///
/// @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="" />
///
#{manageScope.$scope}.#{manageScope.$prefix}util_img-is-responsive {
  width: 100% important.$important;
}