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

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

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

@import 'utilityMixins/focusVisible';
@import 'libSupport/manageScope';
@import 'core';

/// Baseline HTML setting to establish box-model and default font size.
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   html {}
///
/// @example scss - Selector(s) when $scope: true;
///   html.auro {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_html {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
#{$sym}#{$prefix}html#{$scope} {
  box-sizing: border-box;

  font-size: $auro-text-body-size-default;

  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
}

/// Set baseline type settings for `body` element or with the use of the `.baseType` selector.
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   body,
///   .baseType {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro body,
///   .auro .baseType {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .body,
///   .auro_baseType {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
#{$scope}#{$sym}#{$prefix}body,
#{$scope}.#{$prefix}baseType {
  margin: 0;

  color: $auro-color-text-primary-on-light;

  font-family: $auro-font-family-default;
  font-variant-ligatures: no-common-ligatures;
  font-size: $auro-text-body-size-default;
  font-weight: $auro-text-body-default-weight;
  line-height: $auro-text-body-height-default;
}

/// Sets standard `margin` for all paragraph style content
///
/// Use of nested `.auro_hyperlink` defines underline text-decoration for anchor tags
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   .baseParagraph {}
///   .baseParagraph .hyperlink {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .baseParagraph {}
///   .auro .baseParagraph .hyperlink {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_baseParagraph {}
///   .auro_baseParagraph .auro_hyperlink {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
#{$scope}.#{$prefix}baseParagraph {
  margin: 0 0 1rem;

  line-height: $auro-text-body-height-default;

  .#{$prefix}hyperlink {
    text-decoration: underline;
  }
}

/// Baseline hyperlink styles as mirrored in auro-hyperlink web component
///
/// Support for: `.hyperlink--nav`, and `.hyperlink--ondark`
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   .hyperlink {}
///   .hyperlink--inline {}
///   .hyperlink--darktheme {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .hyperlink {}
///   .auro .hyperlink--inline {}
///   .auro .hyperlink--darktheme {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_hyperlink {}
///   .auro_hyperlink--inline {}
///   .auro_hyperlink--darktheme {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
#{$scope}.#{$prefix}hyperlink {
  text-decoration: underline;

  color: $auro-color-ui-default-on-light;

  &.focus-visible { /* stylelint-disable-line selector-max-class */
    @include auro_focus-hyperlink(sass);
  }

  &:visited {
    color: $auro-color-ui-default-on-light;

    &.focus-visible { /* stylelint-disable-line selector-max-class */
      @include auro_focus-hyperlink(sass);
    }
  }

  &--nav {
    display: block;

    text-decoration: none;

    &:not(.is-touching) {
      &:hover {
        text-decoration: underline !important;
      }
    }
  }

  &--ondark {
    color: $auro-color-ui-default-on-dark;

    &:not(.is-touching) {
      &:hover {
        color: $auro-color-ui-hover-on-dark;
      }
    }

    &:visited {
      color: $auro-color-ui-default-on-dark;
    }
  }

  &:not(.is-touching) {
    &:hover {
      text-decoration: none;

      color: $auro-color-ui-hover-on-light;
    }
  }
}

/// Default setting for all `<img />` tags so that images will automatically adjust to fit the size of the screen.
/// If additional properties are needed to shape the img selector, please see the list of Utility classes including the [.util_img-is-responsive](/#utility-responsive-css-#{$scope}.#{$prefix}util_img-is-responsive) selector to scale images with responsive aspects.
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   img {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro img {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_img {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
#{$scope}#{$sym}#{$prefix}img {
  max-width: 100%;
}

/// Legal copy, disclaimers, and footnotes below applicable content section. Above input as floating label, below input as help or error text.
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   small,
///   .type--small {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro small,
///   .auro .type--small {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_small,
///   .auro_type--small {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
#{$scope}#{$sym}#{$prefix}small,
#{$scope}.#{$prefix}type--small {
  font-size: $auro-text-body-size-xs;
  line-height: $auro-text-body-height-xs;
}

$paragraph: null !default; /* stylelint-disable-line scss/dollar-variable-first-in-block */
/// Set `<p>` element margin standard. This selector is not set by default, set the `$paragraph` flag to `true' prior to import.
///
/// Other options are to use the `<small>` element or the `.baseParagraph` selector.
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   p {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro p {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_p {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///
/// @example scss - import file with `$paragraph` flag set to true
///   $paragraph: true;
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///

#{$scope}#{$sym}#{$prefix}p {
  @if $paragraph {
    margin: 0 0 1rem;

    line-height: $auro-text-body-height-default;
  }
}

/// Defines the font size and color of fine print text
///
/// [Manage](/#scope-prefix-variable) `$scope` and `$prefix` options.
/// @group essentials
/// @example scss - Default selector(s)
///   .fineprint {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .fineprint {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_fineprint {}
///
/// @example scss - import file
///   @import "./node_modules/@alaskaairux/webcorestylesheets/dist/essentials";
///

#{$scope}.#{$prefix}fineprint {
  font-family: var(--auro-font-family-default);
  font-size: var(--auro-text-body-size-xs);
  line-height: var(--auro-text-body-height-xs);
  color: var(--auro-color-text-secondary-on-light);
}