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

@use '../../libSupport/manageScope';
@use '../../utilityMixins/noLigatures';
@use '../../core';
@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables";

/// 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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
///
#{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$scope} {
  box-sizing: border-box;

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

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

  font-family: var(--ds-font-family-default, SCSSVariables.$ds-font-family-default);
  @include noLigatures.auro_noLigatures;
  font-size: var(--ds-text-body-size-default, SCSSVariables.$ds-text-body-size-default);
  font-weight: var(--ds-text-body-default-weight, SCSSVariables.$ds-text-body-default-weight);
  line-height: var(--ds-text-body-height-default, SCSSVariables.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
///
#{manageScope.$scope}.#{manageScope.$prefix}baseParagraph {
  margin: 0 0 1rem;

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

  .#{manageScope.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
#{manageScope.$scope}.#{manageScope.$prefix}hyperlink {
  transition: all .15s ease;
  text-decoration: underline;
  color: var(--ds-advanced-color-hyperlink-text);
  border-radius: 3px;
  outline-offset: unset;
  outline-style: solid;
  outline-width: 1px;
  outline-color: transparent;

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

  &:focus-visible {
    outline-color: var(--ds-advanced-color-state-focused, SCSSVariables.$ds-color-border-ui-focus-default);
    outline-offset: var(--ds-size-25, SCSSVariables.$ds-size-25);
  }

  @media (hover: hover) {
    &:hover {
      text-decoration: none;
      color: var(--ds-advanced-color-hyperlink-text-hover);
    }
  }

  &:focus-visible {
    outline-color: var(--ds-color-border-ui-focus-default, SCSSVariables.$ds-color-border-ui-focus-default);
    outline-offset: var(--ds-size-25, SCSSVariables.$ds-size-25);
  }

  &--nav {
    display: block;
    text-decoration: none;

    @media (hover: hover) {
      &:hover {
        text-decoration: underline;
      }
    }

    &:focus-visible {
      outline-width: var(--ds-size-50, SCSSVariables.$ds-size-50);
      outline-offset: unset;
    }
  }

  &--ondark {
    color: var(--ds-advanced-color-hyperlink-text-inverse);

    @media (hover: hover) {
      &:hover {
        color: var(--ds-advanced-color-hyperlink-text-inverse-hover);
      }
    }

    &:visited {
      color: var(--ds-advanced-color-hyperlink-text-inverse);
    }
  }
}

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

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

    line-height: var(--ds-text-body-height-default, SCSSVariables.$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
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/essentials" as *;
///

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