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

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

/*
  Essentials for Auro Classic theme
*/

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

@import '../../libSupport/manageScope';
@import '../../core';

/// Baseline HTML setting to establish box-model and default font size.
///
/// [Manage](/#scope-prefix-variable-scope) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///
#{$sym}#{$prefix}html#{$scope} {
  box-sizing: border-box;

  font-size: var(--ds-text-body-size-default, $ds-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) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///
#{$scope}#{$sym}#{$prefix}body,
#{$scope}.#{$prefix}baseType {
  margin: 0;

  color: var(--ds-color-text-primary-default, $ds-color-text-primary-default);

  font-family: var(--ds-font-family-default, $ds-font-family-default);
  font-variant-ligatures: no-common-ligatures;
  font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
  font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
  line-height: var(--ds-text-body-height-default, $ds-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) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///
#{$scope}.#{$prefix}baseParagraph {
  margin: 0 0 1rem;

  line-height: var(--ds-text-body-height-default, $ds-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) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///
#{$scope}.#{$prefix}hyperlink {
  text-decoration: underline;

  color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);

  &:visited {
    color: var(--ds-color-text-ui-default-default, $ds-color-text-ui-default-default);
  }

  &--nav {
    display: block;

    text-decoration: none;

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

  &--ondark {
    color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);

    &:not(.is-touching) {
      &:hover {
        color: var(--ds-color-text-ui-hover-inverse, $ds-color-text-ui-hover-inverse);
      }
    }

    &:visited {
      color: var(--ds-color-text-ui-default-inverse, $ds-color-text-ui-default-inverse);
    }
  }

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

      color: var(--ds-color-text-ui-hover-default, $ds-color-text-ui-hover-default);
    }
  }
}

/// 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) `$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/@aurodesignsystem/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) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///
#{$scope}#{$sym}#{$prefix}small,
#{$scope}.#{$prefix}type--small {
  font-size: var(--ds-text-body-size-xs, $ds-text-body-size-xs);
  line-height: var(--ds-text-body-height-xs, $ds-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) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///
/// @example scss - import file with `$paragraph` flag set to true
///   $paragraph: true;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials";
///

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

    line-height: var(--ds-text-body-height-default, $ds-text-body-height-default);
  }
}

/// Defines the font size and color of fine print text
///
/// [Manage](/#scope-prefix-variable-scope) `$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/@aurodesignsystem/webcorestylesheets/dist/essentials";
///

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