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

// Styles in this document are standardized are NOT to be edited.
// All styles for the custom element are located in the ./src directory.

// ----------------------- DO NOT EDIT -----------------------------
@import './../../node_modules/@aurodesignsystem/design-tokens/dist/legacy/auro-classic/SCSSVariables';
@import './../../node_modules/@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska';

@import './../breakpoints';
@import './../grids';

// Creates baseline output in CSS
@import './../fonts/legacy/auro-classic';
@import './../normalize';
@import './../headings';
@import './../blockquote';
@import "./../componentSupport/table";
$paragraph: true;
@import './../focus-visible';
@import './../essentials/legacy/auro-classic';

/* stylelint-disable selector-type-no-unknown */

// Custom styles per demo pages
// 1:1 match to ./src/sass/demo.scss file in docsite
.auro-markdown {
  h1,
  h2,
  h3 {
    @extend .heading;
  }

  h1 {
    @extend .heading--display;
  }

  h2 {
    @extend .heading--700;
  }

  h3 {
    @extend .heading--600;
  }

  h4 {
    @extend .heading--500;
  }

  a {
    @extend .hyperlink;
  }

  p {
    @extend p;

    &:last-child {
      margin-bottom: 0;
    }
  }

  *:not(auro-table):not([auro-table]) > table {
    @extend .auro_table;
  }
}

// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background: var(--ds-basic-color-surface-neutral-medium, $ds-basic-color-surface-neutral-medium);
}

// !important because that libraries that inline CSS SUCK!
pre  {
  background: var(--ds-basic-color-surface-neutral-medium, $ds-basic-color-surface-neutral-medium) !important;
  border: unset !important;
  margin-bottom: var(--ds-size-300, $ds-size-300) !important;
  padding-left: var(--ds-size-150, $ds-size-150) !important;
  padding-top: var(--ds-size-200, $ds-size-200) !important;
  padding-bottom: var(--ds-size-200, $ds-size-200) !important;

  code {
    font-size: .85rem !important;
  }
}

auro-accordion {
  pre {
    background: none !important;
    margin-top: 0 !important;
    margin-bottom: 1rem !important;
    padding: 0 !important;
  }
}

auro-accordion + .exampleWrapper,
auro-accordion + p {
  margin-top: 2rem !important;
}

code[class*="language-"], pre[class*="language-"] {
  font-family: monospace;
}

code:not(.html):not(.css):not(.js) {
  color: var(--ds-color-utility-pink-default, $ds-color-utility-pink-default);
}

// -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=

.exampleWrapper,
.exampleWrapper--ondark {
  padding: 2rem;
  border-radius: 0.5rem;
  border-width: 1px;
  margin-bottom: 1rem;
  
  box-shadow: var(--ds-elevation-100, 0px 2px 4px $ds-elevation-100);
}
.exampleWrapper {
  margin-bottom: 1rem;
  border-style: solid;
  border-color: var(--ds-basic-color-border-subtle, $ds-basic-color-border-subtle);
  background: var(--ds-basic-color-surface-default, $ds-basic-color-surface-default);
}

.exampleWrapper--ondark {
  background: var(--ds-basic-color-surface-inverse, $ds-basic-color-surface-inverse);
}