_core.scss

// 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";

$focus: null !default;

// sass-lint:disable no-important

/// Global selector to address box-model and default `:focus` pseudo elements.
///
/// Global media setting for [a11y support of reduced-motion](https://twitter.com/nathansmith/status/1242606456677040128)
///
/// [Manage](/#scope-prefix-variable) `$scope` option.
/// @group core
/// @example scss - Default selector(s)
///   *, *:before, *:after {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro *, .auro *:before, .auro *:after {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";
///
/// @example scss - import file with `$focus` set to `true`
///   $focus: true;
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";
///
#{$scope} * {
  &,
  &:before,
  &:after {
    box-sizing: border-box;

    @media (prefers-reduced-motion: reduce) {
      animation: none !important;
      transition: none !important;
    }
  }

  // if $focus is true, override the default focus outline
  @if $focus {
    &:focus {
      outline: 2px solid var(--auro-color-ui-default-on-light);
    }
  }
}

/// Selector to remove default focus styles when the [focus visible](https://www.npmjs.com/package/focus-visible) polyfill is loaded and the 
/// focus-visible class is not applied to the element. Usually this means the user is clicking the element instead of tabbing to it.
///
/// This can eventually be removed once all browsers support `:focus-visible`. 
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";
///
/// @group Accessibility
.js-focus-visible :focus:not(.focus-visible) {
  // Only visible when Windows High-Contrast Mode is turned on
  outline: 3px solid transparent;
}

/// Selector to remove default focus styles when the :focus-visible pseudo-selector does not apply. Usually this means the user is clicking the element instead of tabbing to it.
///
/// Check current browser support for :focus-visible on [Can I Use](https://caniuse.com/css-focus-visible).
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/core";
///
/// @group Accessibility
:focus:not(:focus-visible) {
  outline: 3px solid transparent;
}