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

@use "sass:map";

@use "../libSupport/manageScope";
@use "../utilityMixins/noLigatures";
@use "../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.
  #{manageScope.$sym}#{manageScope.$prefix}html#{manageScope.$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.
  #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}body,
  #{manageScope.$scope}.#{manageScope.$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');
    }
    
    @include noLigatures.auro_noLigatures;
  }

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

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

  /// Baseline hyperlink styles as mirrored in auro-hyperlink web component
  #{manageScope.$scope}.#{manageScope.$prefix}hyperlink {
    transition: all .15s ease;
    text-decoration: underline;
    color: map.get($theme-props, 'hyperlink-color');
    border-radius: 3px;
    outline-offset: unset;
    outline-style: solid;
    outline-width: 1px;
    outline-color: transparent;

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

    &:focus-visible {
      outline-color: map.get($theme-props, 'focus-color');
      outline-offset: map.get($theme-props, 'focus-offset');
    }

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

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

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

      &:focus-visible {
        outline-width: map.get($theme-props, 'focus-width');
        outline-offset: unset;
      }
    }

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

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

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

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

  /// Legal copy, disclaimers, and footnotes
  #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}small,
  #{manageScope.$scope}.#{manageScope.$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)
  #{manageScope.$scope}#{manageScope.$sym}#{manageScope.$prefix}p {
    @if $paragraph {
      margin: 0 0 1rem;
      line-height: map.get($theme-props, 'paragraph-line-height');
    }
  }

  /// Fine print text
  #{manageScope.$scope}.#{manageScope.$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');
    }
  }
}