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

/// Utility class to display elements `inline`
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-display
/// @example scss - Default selector(s)
///   .util_displayInline {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_displayInline {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_displayInline {}
///
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayInline {
  display: inline $important;
}

/// Utility class to display elements `inline-block`
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-display
/// @example scss - Default selector(s)
///   .util_displayInline {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_displayInline {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_displayInline {}
///
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayInlineBlock {
  display: inline-block $important;
}

/// Utility class to display elements `block`
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-display
/// @example scss - Default selector(s)
///   .util_displayBlock {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_displayBlock {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_displayBlock {}
///
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayBlock {
  display: block $important;
}

/// Utility class to display elements `flex`
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-display
/// @example scss - Default selector(s)
///   .util_displayFlex {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_displayFlex {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_displayFlex {}
///
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayFlex {
  display: flex $important;
}

/// Utility class to display elements `none`
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-display
/// @example scss - Default selector(s)
///   .util_displayHidden {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_displayHidden {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_displayHidden {}
///
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayHidden {
  display: none $important;
}

/// Utility class to visually hide elements within the UI, but still be picked up by screen readers.
///
/// [Manage](/#utility-variable-important) `!important` flag.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group Utility-display
/// @example scss - Default selector(s)
///   .util_displayHiddenVisually {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .util_displayHiddenVisually {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_util_displayHiddenVisually {}
///
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/displayProperties";
#{$scope}.#{$prefix}util_displayHiddenVisually {
  position: absolute $important;

  overflow: hidden $important;
  clip: rect(1px, 1px, 1px, 1px) $important;

  width: 1px $important;
  height: 1px $important;
  padding: 0 $important;

  border: 0 $important;
}