/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!./node_modules/resolve-url-loader/index.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[4]!./source/components/styleguide/styles.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.c-styleguide {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-inline: 1rem;
}
@media (min-width: 690px) {
  .c-styleguide {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 4rem;
    padding-inline: 2rem;
  }
}
.c-styleguide h1,
.c-styleguide h2,
.c-styleguide h3,
.c-styleguide h4,
.c-styleguide h5,
.c-styleguide h6 {
  margin: 0.5em 0 1em;
}
.c-styleguide hr {
  margin: 2em 0;
}

.c-styleguide__toc {
  padding: 1rem;
  background-color: white;
  border-radius: 1rem;
  box-shadow: 0 0 40px rgba(200, 200, 200, 0.25);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
@media (min-width: 690px) {
  .c-styleguide__toc {
    position: sticky;
    top: 5vh;
    height: 90vh;
  }
}
.c-styleguide__toc h2 {
  font-size: 1.25rem;
}
.c-styleguide__toc ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
}

.c-styleguide__headline {
  position: relative;
}
.c-styleguide__headline .c-headline__before {
  position: absolute;
  right: calc(100% + 0.5em);
  padding: 8px;
  border-radius: 1000px;
  background-color: var(--theme-palette-color-1);
  color: white;
}
.c-styleguide__headline svg {
  display: block;
}

.c-styleguide__category-headline {
  margin-block: 2rem;
  padding: 0.5rem 1rem;
  background-color: var(--theme-palette-color-6);
}

.c-styleguide-component {
  padding-bottom: 32px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--theme-palette-color-6);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.c-styleguide-component__fields {
  margin-block: 1rem;
}

.c-styleguide-component__field {
  border-radius: 0.5rem;
  border: 1px solid var(--theme-border-color);
  padding: 1em 1.5em;
  font-size: 0.875rem;
}
.c-styleguide-component__field strong {
  font-family: monospace;
}

/*# sourceMappingURL=styles.css.map*/