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

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

// stylelint-disable mixins-before-declarations, variable-for-property, no-vendor-prefixes, no-invalid-position-at-import-rule
@use '@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables' as vac;
@import 'libSupport/manageScope';

$fixed-nav-width: 280px;
$fixed-anchor-width: 168px;


/// This mixin will set the element to be sticky on tablet and larger devices.
///
/// @group grid
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
/// @example scss - import mixin file with altered output values prior to import
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
@mixin grid-stickycolumn--md {
  @media screen and (min-width: vac.$ds-grid-breakpoint-md) {
    position: sticky;
    top: 0;
    max-height: 100vh;
    padding-top: var(--ds-grid-margin-xl, vac.$ds-grid-margin-xl);
    @content;
  }
}

/// This mixin will set the element to be sticky on mobile devices.
///
/// @group grid
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
/// @example scss - import mixin file with altered output values prior to import
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
@mixin grid-stickycolumn--xs {
  position: sticky;
  top: 0;
  --align-self: stretch;
  align-self: var(--align-self);
}


/// @group grid
/// @param {string} $maxWidth [1232px] - Specifies the max-width value of the grid.
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
/// @example scss - import mixin file with altered output values prior to import
///   $maxWidth: vac.$ds-grid-breakpoint-xl !default;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
@mixin grid_width($maxWidth) {
  max-width: $maxWidth;
}

/// @group grid
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
/// @example scss - import mixin file with altered output values prior to import
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
@mixin grid_margin() {
  margin-left: auto;
  margin-right: auto;
}

/// @group grid
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
/// @example scss - import mixin file with altered output values prior to import
/// $padding: vac.$ds-grid-margin-xs !default;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
@mixin grid_padding($padding) {
  padding-left: $padding;
  padding-right: $padding;
}

/// @group grid
/// @param {string} $gutter [16px] - Specifies the gutter/gap(horizontal & vertical spacing) value between each cell of the grid.
/// @example scss - import mixin file
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints";
/// @example scss - import mixin file with altered output values prior to import
///   $gutter: vac.$ds-grid-gutter-xs !default;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
@mixin grid_gutter($gutter) {
  gap: $gutter;
  @include auro_grid-breakpoint--sm {
   gap: var(--ds-grid-gutter-sm, vac.$ds-grid-gutter-sm);
  }
  @include auro_grid-breakpoint--md {
    gap: var(--ds-grid-gutter-md, vac.$ds-grid-gutter-md);
  }
  @include auro_grid-breakpoint--lg {
    gap: var(--ds-grid-gutter-lg, vac.$ds-grid-gutter-lg);
  }
  @include auro_grid-breakpoint--xl {
    gap: var(--ds-grid-gutter-xl, vac.$ds-grid-gutter-xl);
  }
}

/// Container class
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group container
/// @example scss - Default selector(s)
///   .container {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .container {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_container {}
///
/// @example html - Example HTML selector use
///   <element class="container"> ... </element>
/// @example scss - import file;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
#{$scope}.#{$prefix}container {
  display: grid;
  @include grid_margin();
  @include grid_width(vac.$ds-grid-breakpoint-xl);
}

/// Container class
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group container
/// @example scss - Default selector(s)
///   .container {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .container {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_container {}
///
/// @example html - Example HTML selector use
///   <element class="container"> ... </element>
/// @example scss - import file;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
#{$scope}.#{$prefix}pagecontainer {
  @include grid_padding(vac.$ds-grid-margin-xs);
  @include grid_margin();
  @include grid_width(vac.$ds-grid-breakpoint-xl);

  @include auro_grid-breakpoint--sm {
    @include grid_padding(vac.$ds-grid-margin-sm);
  }
  @include auro_grid-breakpoint--md {
    @include grid_padding(vac.$ds-grid-margin-md);
  }
  @include auro_grid-breakpoint--lg {
    @include grid_padding(vac.$ds-grid-margin-lg);
  }
  @include auro_grid-breakpoint--xl {
    @include grid_padding(vac.$ds-grid-margin-xl);
  }

  &.breadcrumbs {
    margin-block-end: 3.35rem;
  }
}

/// pageLayout-2colAnchorNav class
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group page layouts
/// @example scss - Default selector(s)
///   .pageLayout-2colAnchorNav {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .pageLayout-2colAnchorNav {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_pageLayout-2colAnchorNav {}
///
/// @example html - Example HTML selector use
///   <element class="pageLayout-2colAnchorNav"> ... </element>
/// @example scss - import file;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
#{$scope}.#{$prefix}pageLayout-2colAnchorNav {
  display: grid;
  @include grid_margin();
  @include grid_padding(vac.$ds-grid-margin-xs);
  @include grid_width(vac.$ds-grid-breakpoint-xl);
  @include grid_gutter(vac.$ds-grid-gutter-xl);
  grid-template-areas:
  "breadcrumbs"
  "anchornav"
  "main";

  @include auro_grid-breakpoint--sm {
    @include grid_padding(vac.$ds-grid-margin-sm);
  }
  @include auro_grid-breakpoint--md {
    @include grid_padding(vac.$ds-grid-margin-md);
    grid-template-columns: auto var(--fixed-anchor-width, $fixed-anchor-width);
      grid-template-areas:
      "breadcrumbs breadcrumbs"
      "main anchornav";
  }
  @include auro_grid-breakpoint--lg {
    @include grid_padding(vac.$ds-grid-margin-lg);
  }
  @include auro_grid-breakpoint--xl {
    @include grid_padding(vac.$ds-grid-margin-xl);
  }

  .breadcrumbs {
    grid-area: breadcrumbs;
  }
  .main {
    grid-area: main;
    * {
      scroll-margin-top: var(--ds-grid-margin-md, vac.$ds-grid-margin-md);
    }
  }
  .anchornav {
    grid-area: anchornav;
    @include grid-stickycolumn--md;
  }
}

/// pageLayout-2colSideNav class
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group page layouts
/// @example scss - Default selector(s)
///   .pageLayout-2colSideNav {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .pageLayout-2colSideNav {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_pageLayout-2colSideNav {}
///
/// @example html - Example HTML selector use
///   <element class="pageLayout-2colSideNav"> ... </element>
/// @example scss - import file;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
#{$scope}.#{$prefix}pageLayout-2colSideNav {
  display: grid;
  @include grid_margin();
  @include grid_padding(0);
  @include grid_width(vac.$ds-grid-breakpoint-xl);
  @include grid_gutter(vac.$ds-grid-gutter-xl);
  grid-template-areas:
  "breadcrumbs"
  "sidenav"
  "main";


  @include auro_grid-breakpoint--md {
    @include grid_padding(vac.$ds-grid-margin-md);
    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto;
      grid-template-areas:
      "breadcrumbs breadcrumbs"
      "sidenav main";
  }

  @include auro_grid-breakpoint--lg {
    @include grid_padding(vac.$ds-grid-margin-lg);
  }
  @include auro_grid-breakpoint--xl {
    @include grid_padding(vac.$ds-grid-margin-xl);
  }


  .breadcrumbs {
    grid-area: breadcrumbs;
    @include grid_padding(vac.$ds-grid-margin-xs);
    @include auro_grid-breakpoint--md {
      @include grid_padding(0);
    }
  }

  .sidenav {
    grid-area: sidenav;
    background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
    @include grid_padding(vac.$ds-grid-margin-xs);

    @include auro_grid-breakpoint--md {
      @include grid_padding(0);
      background-color: transparent;
    }
  }

  .main {
    grid-area: main;
    @include grid_padding(vac.$ds-grid-margin-xs);
    @include auro_grid-breakpoint--md {
    @include grid_padding(0);
    }
    * {
      scroll-margin-top: var(--ds-grid-margin-md, vac.$ds-grid-margin-md);
    }
  }
}

/// pageLayout-3col class
///
/// [Manage](/#scope-prefix-variable-scope) `$scope` and `$prefix` options.
/// @group page layouts
/// @example scss - Default selector(s)
///   .pageLayout-3col {}
///
/// @example scss - Selector(s) when $scope: true;
///   .auro .pageLayout-3col {}
///
/// @example scss - Selector(s) when $prefix: true;
///   .auro_pageLayout-3col {}
///
/// @example html - Example HTML selector use
///   <element class="pageLayout-3col"> ... </element>
/// @example scss - import file;
///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/grids";
///
#{$scope}.#{$prefix}pageLayout-3col {
  display: grid;
  @include grid_margin();
  @include grid_padding(0);
  @include grid_width(vac.$ds-grid-breakpoint-xl);
  @include grid_gutter(vac.$ds-grid-gutter-xl);
  grid-template-areas:
  "breadcrumbs"
  "sidenav"
  "anchornav"
  "main";


  @include auro_grid-breakpoint--md {
    @include grid_padding(vac.$ds-grid-margin-md);
    grid-template-columns: var(--fixed-nav-width, $fixed-nav-width) auto var(--fixed-anchor-width, $fixed-anchor-width);
      grid-template-areas:
      "breadcrumbs breadcrumbs breadcrumbs"
      "sidenav main anchornav";
  }

  @include auro_grid-breakpoint--lg {
    @include grid_padding(vac.$ds-grid-margin-lg);
  }
  @include auro_grid-breakpoint--xl {
    @include grid_padding(vac.$ds-grid-margin-xl);
  }


  .breadcrumbs {
    grid-area: breadcrumbs;
    @include grid_padding(vac.$ds-grid-margin-xs);
    @include auro_grid-breakpoint--md {
      @include grid_padding(0);
    }
  }

  .sidenav {
    grid-area: sidenav;
    z-index: 1;
    background-color: var(--ds-color-container-primary-default, $ds-color-container-primary-default);
    @include grid_padding(vac.$ds-grid-margin-xs);
    @include grid-stickycolumn--xs();


    @include auro_grid-breakpoint--md {
      @include grid_padding(0);
      background-color: transparent;
    }
  }

  .main {
    grid-area: main;
    @include grid_padding(vac.$ds-grid-margin-xs);
    @include auro_grid-breakpoint--md {
    @include grid_padding(0);
    }
    * {
      scroll-margin-top: var(--ds-grid-margin-md, vac.$ds-grid-margin-md);
    }
  }

  .anchornav {
    grid-area: anchornav;
    @include grid-stickycolumn--md;
    @include grid_padding(vac.$ds-grid-margin-xs);

    @include auro_grid-breakpoint--md {
      @include grid_padding(0);
    }
  }
}