.color-outputs {
  display: grid;
  gap: var(--base-4);
  grid-auto-columns: 180px;
  grid-auto-rows: 60px;
  justify-content: center;
}
.color-output {
  border-radius: 1000px;
}
.tsc-column .color-output--foo {
  background-color: hsl(340, 66%, 47%);
}
.tsc-column.theme-dark .color-output--foo {
  background-color: hsl(340, 72%, 61%);
}
.tsc-column .color-output--bar {
  background-color: #f4bbce;
}
.tsc-column.theme-dark .color-output--bar {
  background-color: #8b1d41;
}
.color-output--qux {
  border: 4px solid;
}
.tsc-column .color-output--qux {
  background-color: #f9dde6;
}
.tsc-column.theme-dark .color-output--qux {
  background-color: #63142f;
}
.tsc-column .color-output--qux {
  border-color: #f4bbce;
}
.tsc-column.theme-dark .color-output--qux {
  border-color: #8b1d41;
}
.image-output {
  height: 112px;
  width: 112px;
  border-radius: 112px;
}
.tsc-column .image-output.foo.colored {
  background-color: hsl(293, 52%, 48%);
}
.tsc-column.theme-dark .image-output.foo.colored {
  background-color: hsl(293, 61%, 63%);
}
.tsc-column .image-output.foo.colored .img {
  background-image: url("../img/mw-logo-white.svg");
}
.tsc-column.theme-dark .image-output.foo.colored .img {
  background-image: url("../img/mw-logo-black.svg");
}
.image-output.foo.greyscale {
  border: 1px solid;
}
.tsc-column .image-output.foo.greyscale {
  border-color: #000000;
}
.tsc-column.theme-dark .image-output.foo.greyscale {
  border-color: #FFFFFF;
}
.tsc-column .image-output.foo.greyscale .img {
  background-image: url("../img/mw-logo-black.svg");
}
.tsc-column.theme-dark .image-output.foo.greyscale .img {
  background-image: url("../img/mw-logo-white.svg");
}
.image-output .img {
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/*# sourceMappingURL=docs-themes.css.map */