:root {
  /*
    Colors

    Ditch hex for HSL
    Hex and RGB are the most common formats for representing color on the web, but they’re not the most useful.
    Using hex or RGB, colors that have a lot in common visually look nothing alike in code.
    HSL fixes this by representing colors using attributes the human-eye intuitively perceives: hue, saturation, and lightness.

    Where a color is defined in the brand guidelines, it's referenced it in a comment.
   */
  --primary-color050: hsla(24, 100%, 96%, 1);
  --primary-color100: hsla(20, 96%, 90%, 1);
  --primary-color200: hsla(21, 95%, 83%, 1);
  --primary-color300: hsla(21, 95%, 76%, 1);
  --primary-color400: hsla(21, 95%, 68%, 1);
  --primary-color500: hsla(21, 95%, 56%, 1); /* 'KG Orange' */
  --primary-color600: hsla(21, 82%, 51%, 1);
  --primary-color700: hsla(21, 60%, 37%, 1);
  --primary-color800: hsla(21, 61%, 24%, 1);
  --primary-color900: hsla(21, 61%, 12%, 1);
  --primary-color500-trans: hsla(21, 95%, 56%, 0.5);

  --neutral-color050: hsl(216, 33%, 97%);
  --neutral-color100: hsl(214, 15%, 91%);
  --neutral-color200: hsl(210, 16%, 82%);
  --neutral-color300: hsl(211, 13%, 65%);
  --neutral-color400: hsl(211, 10%, 53%);
  --neutral-color500: hsl(211, 12%, 43%);
  --neutral-color600: hsl(209, 14%, 37%);
  --neutral-color680-trans: hsla(209, 14%, 30%, 0.5);
  --neutral-color700: hsl(209, 15%, 28%);
  --neutral-color800: hsl(210, 18%, 22%); /* Charcoal */
  --neutral-color850: hsl(210, 17%, 20%);
  --neutral-color900: hsl(207, 16%, 17%);
  --neutral-color900-trans: hsla(207, 16%, 17%, 0.7);

  --white-color: white;
  --grey-color-50: hsla(240, 7%, 98%, 1);
  --grey-color-100: hsla(240, 7%, 97%, 1);
  --grey-color-100-trans: hsla(240, 7%, 97%, 0.9);
  --grey-color-200: hsla(240, 6%, 90%, 1);
  --grey-color-200-trans: hsla(240, 6%, 90%, 0.9);
  --grey-color-300: hsla(240, 3%, 72%, 1);
  --grey-color-300-trans: hsla(240, 3%, 72%, 0.9);

  --supporting-color050: hsl(45, 100%, 96%);
  --supporting-color100: hsl(45, 90%, 88%);
  --supporting-color200: hsl(45, 86%, 81%);
  --supporting-color300: hsl(43, 90%, 76%);
  --supporting-color400: hsl(43, 89%, 70%);
  --supporting-color500: hsl(42, 78%, 60%);
  --supporting-color600: hsl(42, 63%, 48%);
  --supporting-color700: hsl(43, 72%, 37%);
  --supporting-color800: hsl(43, 77%, 27%);
  --supporting-color900: hsl(43, 86%, 17%);

  /*
    We have only defined one accent color.
    This is ok for now, as we only need one shade,
    but at some point in the future we
    will want to define the whole range.
  */
  --accent-color050: hsl(152, 68%, 96%);
  --accent-color100: hsl(154, 75%, 87%);
  --accent-color200: hsl(156, 73%, 74%);
  --accent-color300: hsl(158, 58%, 62%);
  --accent-color400: hsl(160, 51%, 49%);
  --accent-color500: hsl(162, 63%, 41%);
  --accent-color600: hsl(164, 71%, 34%);
  --accent-color700: hsl(166, 72%, 28%);
  --accent-color800: hsl(168, 80%, 23%);
  --accent-color900: hsl(170, 97%, 15%);

  --error-color050: hsl(0, 100%, 95%);
  --error-color100: hsl(0, 100%, 87%);
  --error-color200: hsl(0, 100%, 80%);
  --error-color300: hsl(0, 91%, 69%);
  --error-color400: hsl(0, 83%, 62%);
  --error-color500: hsl(356, 75%, 53%);
  --error-color600: hsl(354, 85%, 44%);
  --error-color700: hsl(352, 90%, 35%);
  --error-color800: hsl(350, 94%, 28%);
  --error-color900: hsl(348, 94%, 20%);

  --brand-linear-gradient: 153deg, var(--primary-color600) 0, var(--primary-color500) 42%,
    var(--supporting-color400) 75%, var(--supporting-color300) 100%;
  --unauthenticated-background-color: var(--primary-color500);

  --floating-banner-color: var(--error-color050);
  /*
    This is actually hard-coded in the patterns.css file.
    TODO(P3/S): interpolate this value in the the background-image prop, used by the bg patters.
   */
  --unauthenticated-palette-color: hsl(0, 41%, 49%);

  /*
    Spacing system
  */
  --ratio: 1.5;
  --s-6: calc(var(--s-5) / var(--ratio));
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));
  --s7: calc(var(--s6) * var(--ratio));
  --s8: calc(var(--s7) * var(--ratio));

  --spacer-7xs: 4px;
  --spacer-6xs: 8px;
  --spacer-5xs: 12px;
  --spacer-4xs: 16px;
  --spacer-3xs: 20px;
  --spacer-2xs: 24px;
  --spacer-xs: 32px;
  --spacer-2xl: 80px;

  --border-radius: var(--s0);
  --border-large-radius: var(--s0);
  --border-thin: 1px;
  --border-menu: var(--s-6);
  --border-thick: var(--s-1);
  --border-default: var(--s-4);

  line-height: var(--ratio);

  --font-color: var(--neutral-color900);

  --font-size-scale: 1.2;
  --font-size-code: calc(0.8rem * var(--font-size-scale));
  --font-size-tag: calc(0.9rem * var(--font-size-scale));
  --font-size-caption: calc(0.85rem * var(--font-size-scale));
  --font-size-about: calc(0.8rem * var(--font-size-scale));
  --font-size-info: calc(0.7rem * var(--font-size-scale));
  --font-size-menu: calc(0.9rem * var(--font-size-scale));
  --font-size-body: calc(1rem * var(--font-size-scale));
  --font-size-body-large: calc(1.1rem * var(--font-size-scale));
  --font-size-h6: calc(1.15rem * var(--font-size-scale));
  --font-size-h5: calc(1.22rem * var(--font-size-scale));
  --font-size-h4: calc(1.3rem * var(--font-size-scale));
  --font-size-h3: calc(1.6rem * var(--font-size-scale));
  --font-size-h2: calc(1.9rem * var(--font-size-scale));
  --font-size-h1: calc(2.35rem * var(--font-size-scale));

  --font-size-s: calc(20px * var(--font-size-scale));
  --font-size-3xs: calc(15px * var(--font-size-scale));

  --font-color-h6: var(--neutral-color900);
  --font-color-h5: var(--neutral-color900);
  --font-color-h4: var(--neutral-color900);
  --font-color-h3: var(--neutral-color900);

  --font-weight-caption: var(--font-weight-regular);
  --font-weight-body: var(--font-weight-regular);
  --font-weight-body-large: var(--font-weight-regular);
  --font-weight-h6: var(--font-weight-medium);
  --font-weight-h5: var(--font-weight-medium);
  --font-weight-h4: var(--font-weight-regular);
  --font-weight-h3: var(--font-weight-light);
  --font-weight-h2: var(--font-weight-light);
  --font-weight-h1: var(--font-weight-light);

  --line-height-caption: 150%;
  --line-height-body: 1;
  --line-height-body-large: 1;
  --line-height-h6: 1;
  --line-height-h5: 1;
  --line-height-h4: 1;
  --line-height-h3: 1;
  --line-height-h2: 1.1;
  --line-height-h1: 1;

  --letter-spacing-caption: 0;
  --letter-spacing-body: 0;
  --letter-spacing-body-large: 0;
  --letter-spacing-h6: 0;
  --letter-spacing-h5: 0;
  --letter-spacing-h4: 0;
  --letter-spacing-h3: 0;
  --letter-spacing-h2: 0;
  --letter-spacing-h1: 0;

  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-medium: 400;
  --font-weight-heavy: 700;

  --font-family-heading: 'Everett', Arial, sans-serif;
  --font-family-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --font-family-monospace: 'PT Mono', monospace;

  --box-shadow-0: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --box-shadow-1: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --box-shadow-2: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --box-shadow-3: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --box-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);

  --background-color: var(--white-color);
  --color-light: var(--neutral-color050);
  --color-dark: var(--neutral-color900);
  --measure: 70ch;

  --topnav-background-color: var(--grey-color-100);
  --topnav-horizontal-padding: var(--s0);
  --topnav-color: var(--font-color);
  --topnav-height: 80px;
  --topnav-logo-height: 49px;
  --topnav-logo-image-width: 19px;
  --toggle-line-height: 3px;
  --toggle-active-translate: 4px;

  --sidenav-background-color: var(--white-color);
  --sidenav-highlight-color: var(--primary-color500);
  --sidenav-color: var(--font-color);
  --sidenav-width: 300px;
  --sidebar-layout-padding-top: var(--topnav-height);
  /* offset to enable visibility of focused sidenav items
  Chrome uses a 3px border, firefox and safari just 1px */
  --sidebar-padding-offset: 3px;

  --max-content-with-sidebar-width: calc(100vw - var(--sidenav-width));

  --welcome-screen-max-content-width: 75rem;

  --modal-background: hsla(210, 18%, 22%, 0.9); /* Charcoal */

  --modal-card-margin: 10px;

  --docs-image-block-padding: 5px;

  --framework-toggle-padding-side: 12px;
  --framework-toggle-margin-side: -8px;
  --framework-toggle-margin-top: 4px;
  --framework-toggle-border-radius: 4px;
  --framework-toggle-font-size: 0.7em;

  /*
    Workaround a CSS/postprocesser issue - you have to set the units here.
   */
  --content-side-padding: 16px;

  --api-indentation: var(--s1);

  /* padding either side of inline highlighted code */
  --inline-code-padding: 0.5ch;

  /*
    I'm using actual pixels here as a work around
    for a bug in the chart-example panel that means it won't
    handle the vertical resize correctly when the height is based
    off of our dynamic font size.
   */
  --chart-example-min-height: 250px;
  --chart-example-max-height: 350px;

  /*
    Site Search Variables
  */
  --search-result-box-background: var(--white-color);
  --search-result-box-background-active: var(--grey-color-100);
  --search-result-box-max-height: 34em;
  --search-result-box-width: 33em;
  --search-result-text-highlight: hsla(20, 96%, 90%, 0.7); /* --primary-color900 */
  --search-result-label-background: var(--grey-color-200);
}

/*
 This is the width at which the content gets too squished when a side nav bar is present.
 I don't like having a fixed pixel value but it's unavoidable with the fixed position side bar.
 Unfortunately, we can't use CSS Grid over the fixed side bar because Internet Explorer.
*/
@media (max-width: 977px) {
  :root {
    --sidenav-width: 25vw;
    --content-side-padding: 0.5rem;
  }
}

:root {
  --section-item-side-padding: var(--s0);
  --section-item-vertical-padding: var(--s-2);
}

.demo {
  height: calc(100vh - var(--topnav-height));
  width: 100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  /* --- REVERT TO ORIGINAL STYLING 
  If you change this change it in website/styles/playground.css and
  in website/styles/storybook.css too */
  color: var(--font-color);
  background-color: var(--background-color);
  --font-color: white;
  --font-color-h6: white;
  --font-color-h5: white;
  --font-color-h4: white;
  --font-color-h3: white;
  --background-color: var(--neutral-color800);
  --grey-color-100: var(--neutral-color050);
}

.demo .button.button--neutral {
  background-color: var(--neutral-color200);
  color: var(--neutral-color900);
}

.demo input {
  background-color: var(--neutral-color900);
}

.demo input:not([type='range']) {
  border: var(--border-thin) solid var(--neutral-color500);
}

.demo .select {
  border: var(--border-thin) solid var(--neutral-color300);
  background-color: var(--neutral-color700);
}
.demo .modifier-key {
  background-color: var(--neutral-color200);
  color: var(--neutral-color900);
}

.demo .modifier-key--active {
  background-color: var(--primary-color500);
}

/* -- END OF REVERT */

.demo__timeline {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  min-width: 0;
}

.demo__rhs-panel {
  background-color: var(--neutral-color800);
  color: var(--neutral-color050);
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  font-size: var(--font-size-info);
  max-width: 320px;
  padding: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  vertical-align: top;
  overflow: auto;
}

.demo__rhs-panel > .demo__options-panel + .demo__options-panel {
  margin-top: var(--s-3);
}

.demo__options-panel {
  border: none;
  border-radius: var(--border-radius);
  background-color: var(--neutral-color850);
}

.demo__options-panel > * {
  padding: var(--s-2) var(--section-item-side-padding);
}

.demo__options-panel label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: var(--s-3);
  cursor: pointer;
}

.demo__options-panel label > * + * {
  margin-left: var(--s-3);
}

.demo__options-panel label:hover {
  background-color: var(--neutral-color900);
}

.demo__options-panel label:last-child {
  margin-bottom: 0;
}

.demo__options-panel label input[type='checkbox'] {
  display: none;
}

.demo__options-panel select {
  display: block;
  font-size: 1em;
  color: var(--font-color);
  padding: var(--s-3) var(--s-2);
  padding-right: 2em; /* need extra padding to make enough room for the caret */
  width: 75%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  border: var(--border-thin) solid var(--neutral-color300);
  border-radius: var(--border-radius);
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  background-color: var(--neutral-color700);
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23E5E8EB%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position:
    right var(--s-1) top 50%,
    0 0;
  background-size:
    var(--s-1) auto,
    100%;
}

.check {
  font-size: 20px;
}

input ~ .check::before {
  content: '\f111';
}

input:checked ~ .check::before {
  content: '\f058';
}

.demo__title {
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-medium);
  line-height: 1.24;
  margin-top: 0px;
  margin-right: 6px;
}
.demo__subtitle {
  font-size: var(--font-size-h6);
  font-weight: var(--font-weight-h6);
}

.demo__legend {
  display: inline-block;
  margin-left: 8px;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.demo__legend-line {
  width: 0;
  height: 22px;
  display: inline-block;
  margin-left: 12px;
  margin-right: 19px;
}

.demo__legend-line-label {
  margin-top: 14px;
}

input[type='range'] {
  width: 300px;
}

.demo__button-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: var(--section-item-vertical-padding) var(--section-item-side-padding);
}

#tooltip {
  background-color: var(--neutral-color050);
  border: none;
  border-top-left-radius: 4px;
  border-left: none;
  border-right: none;
  display: none;
  position: absolute;
  color: var(--background-color);
  pointer-events: none;

  -webkit-box-shadow: 4px 4px 5px -1px rgba(50, 50, 50, 0.6);
  box-shadow: 4px 4px 5px -1px rgba(50, 50, 50, 0.6);
}

#tooltip .wrapper {
  position: relative;
  background-color: white;
  padding: 6px 10px;
  border-left: solid 4px #cad1d8;
  border-right: solid 4px #cad1d8;
  border-top-left-radius: 4px;
  z-index: 1;
}

.checkbox-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.checkbox-container > * + * {
  margin-left: var(--s-2);
}

@font-face {
  font-family: 'Solid Font Awesome Icons';
  font-weight: 900;
  src: url(../../assets/fa-solid-900-9bbb245e67a133f6e486.eot);
  src:
    url(../../assets/fa-solid-900-9bbb245e67a133f6e486.eot?#iefix)
      format('embedded-opentype'),
    url(../../assets/fa-solid-900-1551f4f60c37af51121f.woff2) format('woff2'),
    url(../../assets/fa-solid-900-eeccf4f66002c6f2ba24.woff) format('woff'),
    url(../../assets/fa-solid-900-be9ee23c0c6390141475.ttf) format('truetype'),
    url(../../assets/fa-solid-900-7a8b4f130182d19a2d7c.svg#fontawesome) format('svg');
}