// 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;
$focus-visible: 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://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#taking-it-to-code). By setting the durations to almost 0, we prevent animation from playing for those with motion sensitivities without affecting transition or animation events (e.g. transitionend).
///
/// [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-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
  }

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

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

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

/// 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
.js-focus-visible {
  :focus {
    &:not(.focus-visible) {
      // Only visible when Windows High-Contrast Mode is turned on
      outline: 3px solid transparent;
    }
  }
}