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

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

/*
  Base essentials mixin – shared styles across all themes, 
  excluding legacy themes such as Auro Classic.
  
  Accepts a map of SCSS variable name mappings for theme-specific values
*/

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

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

// Define the $paragraph variable with default value
$paragraph: null !default;

/// Mixin for base essentials
/// @param {Map} $theme-props - Theme map containing property values
@mixin essentials-base($theme-props) {
  
  /// Baseline HTML setting to establish box-model and default font size.
  #{$sym}#{$prefix}html#{$scope} {
    box-sizing: border-box;
    font-size: map-get($theme-props, 'font-size');
    -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.
  #{$scope}#{$sym}#{$prefix}body,
  #{$scope}.#{$prefix}baseType {
    margin: 0;
    color: map-get($theme-props, 'text-color');
    font-family: map-get($theme-props, 'font-family'), map-get($theme-props, 'font-family-fallback');
    font-size: map-get($theme-props, 'font-size');
    font-weight: map-get($theme-props, 'font-weight');
    line-height: map-get($theme-props, 'line-height');
    
    @if map-has-key($theme-props, 'letter-spacing') {
      letter-spacing: map-get($theme-props, 'letter-spacing');
    }
    
    font-variant-ligatures: no-common-ligatures;
  }

  /// Sets standard `margin` for all paragraph style content
  #{$scope}.#{$prefix}baseParagraph {
    margin: 0 0 1rem;
    line-height: map-get($theme-props, 'line-height');

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

  /// Baseline hyperlink styles as mirrored in auro-hyperlink web component
  #{$scope}.#{$prefix}hyperlink {
    text-decoration: underline;
    color: map-get($theme-props, 'hyperlink-color');

    &:visited {
      color: map-get($theme-props, 'hyperlink-color');
    }

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

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

    &--ondark {
      color: map-get($theme-props, 'hyperlink-inverse-color');

      &:not(.is-touching) {
        &:hover {
          color: map-get($theme-props, 'hyperlink-inverse-hover-color');
        }
      }

      &:visited {
        color: map-get($theme-props, 'hyperlink-inverse-color');
      }
    }

    &:not(.is-touching) {
      &:hover {
        text-decoration: none;
        color: map-get($theme-props, 'hyperlink-hover-color');
      }
    }
  }

  /// Default setting for all `<img />` tags
  #{$scope}#{$sym}#{$prefix}img {
    max-width: 100%;
  }

  /// Legal copy, disclaimers, and footnotes
  #{$scope}#{$sym}#{$prefix}small,
  #{$scope}.#{$prefix}type--small {
    font-size: map-get($theme-props, 'small-font-size');
    font-weight: map-get($theme-props, 'small-font-weight');
    line-height: map-get($theme-props, 'small-line-height');
    
    @if map-has-key($theme-props, 'small-letter-spacing') {
      letter-spacing: map-get($theme-props, 'small-letter-spacing');
    }
  }

  /// Paragraph element margin (conditional)
  #{$scope}#{$sym}#{$prefix}p {
    @if $paragraph {
      margin: 0 0 1rem;
      line-height: map-get($theme-props, 'paragraph-line-height');
    }
  }

  /// Fine print text
  #{$scope}.#{$prefix}fineprint {
    font-family: map-get($theme-props, 'font-family'), map-get($theme-props, 'font-family-fallback');
    font-size: map-get($theme-props, 'small-font-size');
    font-weight: map-get($theme-props, 'small-font-weight');
    line-height: map-get($theme-props, 'small-line-height');
    color: map-get($theme-props, 'muted-text-color');
    
    @if map-has-key($theme-props, 'small-letter-spacing') {
      letter-spacing: map-get($theme-props, 'small-letter-spacing');
    }
  }
}