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

@use 'libSupport/manageScope';
@use "@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables";
@use "breakpoints";

/// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading {}
///
/// @example html - Example HTML selector use
///   <element class="heading"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
///
#{manageScope.$scope}.#{manageScope.$prefix}heading {
  margin: calc(#{SCSSVariables.$ds-size-200} + #{SCSSVariables.$ds-size-150}) 0;

  letter-spacing: var(--ds-text-heading-default-spacing, SCSSVariables.$ds-text-heading-default-spacing);

  font-weight: var(--ds-text-heading-default-weight, SCSSVariables.$ds-text-heading-default-weight);
}

/// Heading selector. Required for use with all uses of heading styles. Heading styles are not exclusive to heading tags, e.g. `<h1>`, `<h2>`, etc, but are expected to be used freely to enhance visual appearance of content structure and support any use cases needed for SEO purposes.
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--display {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--display {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--display {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--display"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--display {
  margin-top: 0;

  font-size: var(--ds-text-heading-display-size-breakpoint-sm, SCSSVariables.$ds-text-heading-display-size-breakpoint-sm);
  font-weight: var(--ds-text-heading-display-weight, SCSSVariables.$ds-text-heading-display-weight);
  line-height: var(--ds-text-heading-display-height-breakpoint-sm, SCSSVariables.$ds-text-heading-display-height-breakpoint-sm);

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) {
    font-size: var(--ds-text-heading-display-size-breakpoint-md, SCSSVariables.$ds-text-heading-display-size-breakpoint-md);
    line-height: var(--ds-text-heading-display-height-breakpoint-md, SCSSVariables.$ds-text-heading-display-height-breakpoint-md);
  }

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) {
    font-size: var(--ds-text-heading-display-size-breakpoint-lg, SCSSVariables.$ds-text-heading-display-size-breakpoint-lg);
    line-height: var(--ds-text-heading-display-height-breakpoint-lg, SCSSVariables.$ds-text-heading-display-height-breakpoint-lg);
  }
}

/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--800 {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--800 {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--800 {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--800"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--800 {
  font-size: var(--ds-text-heading-800-size-breakpoint-sm, SCSSVariables.$ds-text-heading-800-size-breakpoint-sm);
  font-weight: var(--ds-text-heading-800-weight, SCSSVariables.$ds-text-heading-800-weight);
  line-height: var(--ds-text-heading-800-height-breakpoint-sm, SCSSVariables.$ds-text-heading-800-height-breakpoint-sm);

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) {
    font-size: var(--ds-text-heading-800-size-breakpoint-md, SCSSVariables.$ds-text-heading-800-size-breakpoint-md);
    line-height: var(--ds-text-heading-800-height-breakpoint-md, SCSSVariables.$ds-text-heading-800-height-breakpoint-md);
  }

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) {
    font-size: var(--ds-text-heading-800-size-breakpoint-lg, SCSSVariables.$ds-text-heading-800-size-breakpoint-lg);
    line-height: var(--ds-text-heading-800-height-breakpoint-lg, SCSSVariables.$ds-text-heading-800-height-breakpoint-lg);
  }
}

/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--700 {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--700 {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--700 {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--700"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--700 {
  font-size: var(--ds-text-heading-700-size-breakpoint-sm, SCSSVariables.$ds-text-heading-700-size-breakpoint-sm);
  font-weight: var(--ds-text-heading-700-weight, SCSSVariables.$ds-text-heading-700-weight);
  line-height: var(--ds-text-heading-700-height-breakpoint-sm, SCSSVariables.$ds-text-heading-700-height-breakpoint-sm);

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) {
    font-size: var(--ds-text-heading-700-size-breakpoint-md, SCSSVariables.$ds-text-heading-700-size-breakpoint-md);
    line-height: var(--ds-text-heading-700-height-breakpoint-md, SCSSVariables.$ds-text-heading-700-height-breakpoint-md);
  }

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) {
    font-size: var(--ds-text-heading-700-size-breakpoint-lg, SCSSVariables.$ds-text-heading-700-size-breakpoint-lg);
    line-height: var(--ds-text-heading-700-height-breakpoint-lg, SCSSVariables.$ds-text-heading-700-height-breakpoint-lg);
  }
}

/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--600 {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--600 {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--600 {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--600"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--600 {
  margin: SCSSVariables.$ds-size-200 0;

  font-size: var(--ds-text-heading-600-size-breakpoint-sm, SCSSVariables.$ds-text-heading-600-size-breakpoint-sm);
  font-weight: var(--ds-text-heading-600-weight, SCSSVariables.$ds-text-heading-600-weight);
  line-height: var(--ds-text-heading-600-height-breakpoint-sm, SCSSVariables.$ds-text-heading-600-height-breakpoint-sm);

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) {
    font-size: var(--ds-text-heading-600-size-breakpoint-md, SCSSVariables.$ds-text-heading-600-size-breakpoint-md);
    line-height: var(--ds-text-heading-600-height-breakpoint-md, SCSSVariables.$ds-text-heading-600-height-breakpoint-md);
  }

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) {
    font-size: var(--ds-text-heading-600-size-breakpoint-lg, SCSSVariables.$ds-text-heading-600-size-breakpoint-lg);
    line-height: var(--ds-text-heading-600-height-breakpoint-lg, SCSSVariables.$ds-text-heading-600-height-breakpoint-lg);
  }
}

/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--500 {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--500 {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--500 {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--500"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--500 {
  margin: SCSSVariables.$ds-size-200 0;

  font-size: var(--ds-text-heading-500-size-breakpoint-sm, SCSSVariables.$ds-text-heading-500-size-breakpoint-sm);
  font-weight: var(--ds-text-heading-500-weight, SCSSVariables.$ds-text-heading-500-weight);
  line-height: var(--ds-text-heading-500-height-breakpoint-sm, SCSSVariables.$ds-text-heading-500-height-breakpoint-sm);

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-md) {
    font-size: var(--ds-text-heading-500-size-breakpoint-md, SCSSVariables.$ds-text-heading-500-size-breakpoint-md);
    line-height: var(--ds-text-heading-500-height-breakpoint-md, SCSSVariables.$ds-text-heading-500-height-breakpoint-md);
  }

  @include breakpoints.auro_breakpoint($min: SCSSVariables.$ds-grid-breakpoint-lg) {
    font-size: var(--ds-text-heading-500-size-breakpoint-lg, SCSSVariables.$ds-text-heading-500-size-breakpoint-lg);
    line-height: var(--ds-text-heading-500-height-breakpoint-lg, SCSSVariables.$ds-text-heading-500-height-breakpoint-lg);
  }
}

/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--400 {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--400 {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--400 {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--400"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--400 {
  margin: SCSSVariables.$ds-size-150 0;

  font-size: var(--ds-text-heading-400-size, SCSSVariables.$ds-text-heading-400-size);
  font-weight: var(--ds-text-heading-400-weight, SCSSVariables.$ds-text-heading-400-weight);
  line-height: var(--ds-text-heading-400-height, SCSSVariables.$ds-text-heading-400-height);
}

/// Main title, hero copy, interactive copy. To summarize screen content as a Primary Heading or direct attention. Used in conjunction with `.heading` selector
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group headings
/// @example scss - Default selector(s)
///   .heading--300 {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .heading--300 {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_heading--300 {}
///
/// @example html - Example HTML selector use
///   <element class="heading heading--300"> ... </element>
/// @example scss - import file
///   @use "./node_modules/@aurodesignsystem/webcorestylesheets/dist/headings" as *;
#{manageScope.$scope}.#{manageScope.$prefix}heading--300 {
  margin: SCSSVariables.$ds-size-150 0;

  font-size: var(--ds-text-heading-300-size, SCSSVariables.$ds-text-heading-300-size);
  font-weight: var(--ds-text-heading-300-weight, SCSSVariables.$ds-text-heading-300-weight);
  line-height: var(--ds-text-heading-300-height, SCSSVariables.$ds-text-heading-300-height);
}