/* 
* this file uses custom-properties, from the css bundle
* so (from `dist/` or CDN) `build/skylab-sdk.css` stylesheet
* should be loaded on the page before this stylesheet
*/
body {
  background-color: var(--color-white);
}
body s-col[ref=docsite-side-nav-container] {
  flex-basis: 241px;
  max-width: 241px;
}
body aui-service-notification s-icon {
  align-self: flex-start;
  margin-top: 4px;
}
body nav[ref=docsite-side-nav] a {
  display: block;
  margin-bottom: 6px;
  color: var(--color-gray-darkest);
}
body nav[ref=docsite-side-nav] a:visited {
  color: var(--color-gray-darkest);
}
body nav[ref=docsite-side-nav] h4 {
  color: var(--color-gray-dark);
  font-weight: var(--font-weight-normal);
}
body header[ref=main-header] {
  min-height: 72px;
}
body header[ref=main-header] a:focus {
  box-shadow: none;
  outline: none;
}
body header[ref=main-header] a:focus > img {
  /* Adds a white border around the button, along with a blue glow. The white and blue have a color contrast ratio of at least 3:1, which means this will work against any background color. */
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-dark);
  /* Give focus precedence above menu */
  z-index: 101;
  /* NOTE: box-shadow is invisible in Windows high-contrast mode, so we need to add a transparent outline, which actually does show up in high-contrast mode. */
  outline: 2px dotted transparent;
  outline-offset: 2px;
}
body header[ref=main-header] .product-version {
  color: var(--color-gray-dark);
  margin-start: var(--margin-xs);
  margin-bottom: 5px;
}
body main {
  flex-grow: 1;
}
body main section a.section-link {
  opacity: 0;
  transition: opacity 100ms linear;
  position: absolute;
  left: -24px;
  top: 13px;
  display: flex;
  text-decoration: none;
}
body main section a.section-link:hover, body main section a.section-link:focus {
  opacity: 1;
}

pre {
  white-space: pre-wrap;
}

code {
  display: inline-block;
  padding: 1px 3px 1px 3px;
  border: 1px solid var(--color-gray-medium);
  border-radius: 2px;
  background-color: var(--color-blue-lightest);
  line-height: var(--line-height-xs);
  font-size: 12px;
}

a:hover > code {
  text-decoration: underline;
}

.color-demo[data-color=red-darkest] {
  background-color: var(--color-red-darkest);
}
.color-demo[data-color=red-darker] {
  background-color: var(--color-red-darker);
}
.color-demo[data-color=red-dark] {
  background-color: var(--color-red-dark);
}
.color-demo[data-color=red-medium] {
  background-color: var(--color-red-medium);
}
.color-demo[data-color=red-light] {
  background-color: var(--color-red-light);
}
.color-demo[data-color=red-lighter] {
  background-color: var(--color-red-lighter);
}
.color-demo[data-color=red-lightest] {
  background-color: var(--color-red-lightest);
}
.color-demo[data-color=orange-darkest] {
  background-color: var(--color-orange-darkest);
}
.color-demo[data-color=orange-darker] {
  background-color: var(--color-orange-darker);
}
.color-demo[data-color=orange-dark] {
  background-color: var(--color-orange-dark);
}
.color-demo[data-color=orange-medium] {
  background-color: var(--color-orange-medium);
}
.color-demo[data-color=orange-light] {
  background-color: var(--color-orange-light);
}
.color-demo[data-color=orange-lighter] {
  background-color: var(--color-orange-lighter);
}
.color-demo[data-color=orange-lightest] {
  background-color: var(--color-orange-lightest);
}
.color-demo[data-color=yellow-darkest] {
  background-color: var(--color-yellow-darkest);
}
.color-demo[data-color=yellow-darker] {
  background-color: var(--color-yellow-darker);
}
.color-demo[data-color=yellow-dark] {
  background-color: var(--color-yellow-dark);
}
.color-demo[data-color=yellow-medium] {
  background-color: var(--color-yellow-medium);
}
.color-demo[data-color=yellow-light] {
  background-color: var(--color-yellow-light);
}
.color-demo[data-color=yellow-lighter] {
  background-color: var(--color-yellow-lighter);
}
.color-demo[data-color=yellow-lightest] {
  background-color: var(--color-yellow-lightest);
}
.color-demo[data-color=green-darkest] {
  background-color: var(--color-green-darkest);
}
.color-demo[data-color=green-darker] {
  background-color: var(--color-green-darker);
}
.color-demo[data-color=green-dark] {
  background-color: var(--color-green-dark);
}
.color-demo[data-color=green-medium] {
  background-color: var(--color-green-medium);
}
.color-demo[data-color=green-light] {
  background-color: var(--color-green-light);
}
.color-demo[data-color=green-lighter] {
  background-color: var(--color-green-lighter);
}
.color-demo[data-color=green-lightest] {
  background-color: var(--color-green-lightest);
}
.color-demo[data-color=blue-darkest] {
  background-color: var(--color-blue-darkest);
}
.color-demo[data-color=blue-darker] {
  background-color: var(--color-blue-darker);
}
.color-demo[data-color=blue-dark] {
  background-color: var(--color-blue-dark);
}
.color-demo[data-color=blue-medium] {
  background-color: var(--color-blue-medium);
}
.color-demo[data-color=blue-light] {
  background-color: var(--color-blue-light);
}
.color-demo[data-color=blue-lighter] {
  background-color: var(--color-blue-lighter);
}
.color-demo[data-color=blue-lightest] {
  background-color: var(--color-blue-lightest);
}
.color-demo[data-color=purple-darkest] {
  background-color: var(--color-purple-darkest);
}
.color-demo[data-color=purple-darker] {
  background-color: var(--color-purple-darker);
}
.color-demo[data-color=purple-dark] {
  background-color: var(--color-purple-dark);
}
.color-demo[data-color=purple-medium] {
  background-color: var(--color-purple-medium);
}
.color-demo[data-color=purple-light] {
  background-color: var(--color-purple-light);
}
.color-demo[data-color=purple-lighter] {
  background-color: var(--color-purple-lighter);
}
.color-demo[data-color=purple-lightest] {
  background-color: var(--color-purple-lightest);
}
.color-demo[data-color=gray-darkest] {
  background-color: var(--color-gray-darkest);
}
.color-demo[data-color=gray-darker] {
  background-color: var(--color-gray-darker);
}
.color-demo[data-color=gray-dark] {
  background-color: var(--color-gray-dark);
}
.color-demo[data-color=gray-medium] {
  background-color: var(--color-gray-medium);
}
.color-demo[data-color=gray-light] {
  background-color: var(--color-gray-light);
}
.color-demo[data-color=gray-lighter] {
  background-color: var(--color-gray-lighter);
}
.color-demo[data-color=gray-lightest] {
  background-color: var(--color-gray-lightest);
}
.color-demo[data-color=white] {
  background-color: var(--color-white);
}
.color-demo[data-color=brand-orange] {
  background-color: var(--color-brand-orange);
}
.color-demo[data-color=brand-blue] {
  background-color: var(--color-brand-blue);
}
.color-demo[data-color=info] {
  background-color: var(--color-info);
}
.color-demo[data-color=success] {
  background-color: var(--color-success);
}
.color-demo[data-color=warn] {
  background-color: var(--color-warn);
}
.color-demo[data-color=error] {
  background-color: var(--color-error);
}
.color-demo[data-color=disabled] {
  background-color: var(--color-disabled);
}
.color-demo[data-color=link-active] {
  background-color: var(--color-link-active);
}
.color-demo[data-color=link-hover] {
  background-color: var(--color-link-hover);
}
.color-demo[data-color=link-pressed] {
  background-color: var(--color-link-pressed);
}

.grid-demo s-row > s-col > div {
  display: block;
  background-color: rgba(38, 168, 255, 0.5);
  margin: 0;
  padding: 0 0.2rem;
  min-height: 2rem;
}
.grid-demo s-row > s-col > div:hover:after {
  content: attr(title);
}

.responsive-example {
  position: sticky;
  top: 0;
}

.responsive-example:before {
  display: block;
  font-size: 0.9rem;
  font-weight: bold;
  color: white;
  opacity: 0.7;
  margin: 0 -0.2rem;
  padding: 0.2rem;
  text-align: center;
  width: 100%;
}

code-sample [ref=editor] * {
  line-height: 18px;
}

code-sample.full-width {
  flex-direction: column;
}

#migration-guide-container s-box {
  padding: var(--padding-lg);
}
#migration-guide-container s-box h3 {
  margin-top: 0;
}
#migration-guide-container s-box :last-child {
  margin-bottom: 0;
}

/* Hide focus styles if they're not needed, for example, when an element receives focus via the mouse. */
/* Show focus styles on keyboard focus. */
#web-components-panel:focus, #react-panel:focus {
  /* Adds a white border around the button, along with a blue glow. The white and blue have a color contrast ratio of at least 3:1, which means this will work against any background color. */
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-dark);
  /* NOTE: box-shadow is invisible in Windows high-contrast mode, so we need to add a transparent outline, which actually does show up in high-contrast mode. */
  outline: 2px dotted transparent;
  outline-offset: 2px;
  /* Give focus precedence above menu */
  z-index: 101;
}
#web-components-panel:focus:not(:focus-visible), #react-panel:focus:not(:focus-visible) {
  box-shadow: none;
  outline: 0;
}
#web-components-panel:focus-visible, #react-panel:focus-visible {
  /* Adds a white border around the button, along with a blue glow. The white and blue have a color contrast ratio of at least 3:1, which means this will work against any background color. */
  box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-blue-dark);
  /* NOTE: box-shadow is invisible in Windows high-contrast mode, so we need to add a transparent outline, which actually does show up in high-contrast mode. */
  outline: 2px dotted transparent;
  outline-offset: 2px;
  /* Give focus precedence above menu */
  z-index: 101;
}

@media screen and (max-width: 383px) {
  .responsive-example:before {
    content: "Smaller than Breakpoint Small 0-383px (-)";
    background-color: var(--color-gray-dark);
  }
}
@media screen and (min-width: 384px) and (max-width: 599px) {
  .responsive-example:before {
    content: "Breakpoint Small 384px-599px (sm)";
    background-color: var(--color-blue-medium);
  }
}
@media screen and (min-width: 600px) and (max-width: 839px) {
  .responsive-example:before {
    content: "Breakpoint Medium 600px-839px (md)";
    background-color: var(--color-green-light);
  }
}
@media screen and (min-width: 840px) and (max-width: 1259px) {
  .responsive-example:before {
    content: "Breakpoint Large 840px-1259px (lg)";
    background-color: var(--color-yellow-medium);
  }
}
@media screen and (min-width: 1260px) {
  .responsive-example:before {
    content: "Breakpoint Extra Large 1260px+ (xl)";
    background-color: var(--color-orange-medium);
  }
}