: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;
  }
}

.about__panel-container {
  font-size: var(--font-size-about);
  background-color: white;
  --font-color: var(--neutral-color900);
  color: var(--neutral-color900);
  -ms-flex-negative: 0;
      flex-shrink: 0;
  overflow: hidden;
  position: relative;
  z-index: 100;
  width: 320px;
  -webkit-transition: width 0.5s ease;
  transition: width 0.5s ease;
  overflow-y: auto;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

.about__panel {
  min-width: 300px;
  width: 320px;
  padding: 20px;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
  overflow-y: auto;
}

.about__panel.collapsed {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  overflow-y: hidden;
}

.about__panel-container.collapsed {
  width: 32px;
  padding: 0px;
  overflow-y: hidden;
}

.about__panel-collapsed-content {
  opacity: 0;
  -webkit-transform: translateX(-100%) rotate(90deg);
          transform: translateX(-100%) rotate(90deg); /* Initially hidden to the left */
  -webkit-transition:
    opacity 0.5s ease 0.5s,
    -webkit-transform 0.5s ease 0.5s;
  transition:
    opacity 0.5s ease 0.5s,
    -webkit-transform 0.5s ease 0.5s;
  transition:
    transform 0.5s ease 0.5s,
    opacity 0.5s ease 0.5s;
  transition:
    transform 0.5s ease 0.5s,
    opacity 0.5s ease 0.5s,
    -webkit-transform 0.5s ease 0.5s;
  position: absolute;
  width: 32px;
  top: 48px;
  right: 0;
  font-weight: 600;
  letter-spacing: 0.08rem;
}

.about__panel-collapsed-content-bottom {
  opacity: 0;
  -webkit-transition: opacity 0.5s ease 0.5s;
  transition: opacity 0.5s ease 0.5s;
  position: absolute;
  width: 32px;
  bottom: 48px;
  right: 0;
  font-weight: 600;
  letter-spacing: 0.08rem;
  cursor: pointer;
}

.about__panel-container.collapsed .about__panel-collapsed-content {
  visibility: visible;
  -webkit-transform: translateX(0) rotate(90deg);
          transform: translateX(0) rotate(90deg);
  opacity: 1;
}

.about__panel-container.collapsed .about__panel-collapsed-content-bottom {
  visibility: visible;
  opacity: 1;
}

.about__panel-container.reopening .about__panel-collapsed-content,
.about__panel-container.reopening .about__panel-collapsed-content-bottom {
  opacity: 0;
  -webkit-transition: opacity 0s ease;
  transition: opacity 0s ease;
}

.demo__info-thumb {
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--neutral-color400);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: absolute;
  top: 12px;
  right: 4px;
  z-index: 2;
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;

  &:hover {
    background-color: #244f56;
    color: white;
  }
}

.demo__info-thumb.rotated {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.no__transition {
  -webkit-transition: none !important;
  transition: none !important;
}

.demo__playground-link {
  position: unset;
  right: unset;
  bottom: unset;
}

.demo__playground-link__text {
  padding-bottom: unset;
}

.demo__playground-link__image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.demo__playground-link___text > span {
  padding-bottom: unset;
  margin-left: var(--s-1);
}

.playground-link__image__collapsed {
  background-color: var(--primary-color500-trans);
  height: 48px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.playground-link__image__collapsed:hover {
  background-color: var(--primary-color500);
  color: var(--neutral-color800);
}

.playground-link__image__collapsed:hover svg > path {
  fill: var(--neutral-color800);
  -webkit-transition: fill 0.5s ease-in-out;
  transition: fill 0.5s ease-in-out;
}

.playground-link__image__collapsed svg > path {
  fill: var(--neutral-color050);
  -webkit-transition: fill 0.5s ease-in-out;
  transition: fill 0.5s ease-in-out;
}

.playground-link__image__collapsed .playground-link__image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.playground-link__image__collapsed .playground-link__image > svg {
  height: 80%;
  width: 80%;
}