@import url(/components/colors.css);
@import url(/docsite-css/sidebar.css);
@import url(/docsite-css/navbar.css);
@import url(/docsite-css/component-display-conatiner.css);
@import url(/docsite-css/code-display-container.css);
/*** grid-layout  ***/
.grid-page-layout {
  display: grid;
  grid-template-columns: 250px 1fr 1fr;
  column-gap: var(--md-space);
  grid-template-areas:
    "nav nav nav"
    "sidebar main main";
}
/*******/

/*** doc-container  ***/
.doc-container {
  width: 100%;
  margin: auto;
  max-width: 1550px;
}
.doc-main-content {
  grid-area: main;
  width: 100%;
  padding: var(--md-space) var(--md-space) var(--xl-space);
}
/*******/

/*** dark-mode ***/
.dark-mode {
  --background-color: hsl(220, 17%, 10%);
  --text-color: hsl(209, 17%, 75%);
  --sidebar-bg-color: hsla(0, 2%, 10%, 0.1);
  --sidebar-fallback-bg-color: hsla(0, 2%, 17%, 0.85);
  --sidebar-list-hover-color: hsl(180, 3%, 24%);
  --border-color: hsl(192, 4%, 44%);
}
.btn-darkmode-toggle {
  background-color: inherit;
  box-shadow: none;
}
/*******/

/*** media-quires ***/
@media only screen and (max-width: 800px) {
  html {
    font-size: 80%;
  }
  .grid-page-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "nav"
      "sidebar"
      "main";
  }
  .doc-container .nav-bar-subtitle {
    display: none;
  }
  .doc-container .nav-bar-title {
    column-gap: var(--md-space);
    align-items: baseline;
  }
}
.component-description {
  margin: 0 var(--md-space);
}
.component-variation-description {
  margin: var(--md-space);
}