palette {
  display: grid;
  gap: var(--base-6);
}
palette-item {
  display: grid;
}
palette-item:last-child {
  margin-block-end: var(--base-3);
}
@media screen and (min-width: 960px) {
  palette-item {
    grid-template-columns: 2fr repeat(9, 1fr);
  }
}
palette-color {
  height: 300px;
  align-items: start;
}
palette-color:first-child {
  border-radius: var(--radius-2) var(--radius-2) 0 0;
}
palette-color:last-child {
  border-radius: 0 0 var(--radius-2) var(--radius-2);
}
@media screen and (min-width: 960px) {
  palette-color:first-child {
    border-radius: var(--radius-2) 0 0 var(--radius-2);
  }
  palette-color:last-child {
    border-radius: 0 var(--radius-2) var(--radius-2) 0;
  }
}
.palette__color-name,
.palette__color-modifier {
  position: relative;
  z-index: 2;
}
.palette__color-name {
  font-size: var(--font-size-h5);
  margin-right: 2ch;
}
.palette__color-modifier {
  margin-left: auto;
  font-size: var(--font-size-h5);
}
.copy-color-variable {
  cursor: copy;
  position: relative;
}
.generic-color {
  display: flex;
  padding: var(--base-2);
  z-index: 0;
  position: relative;
  background-color: var(--this__bg);
  color: var(--contrast-color) !important;
  order: var(--pallete-item-order);
}
.color-copy-overlay {
  pointer-events: none;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 10;
  left: 0;
  top: 0;
  opacity: 0;
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.color-copy-overlay::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--base-6);
  width: var(--base-6);
  border-radius: 50%;
  color: var(--this__bg);
  transform: scale(0.5);
  transition: all 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  background-color: var(--contrast-color);
  box-shadow: var(--elevation-3);
}
.generic-color:hover > .color-copy-overlay {
  opacity: 1;
}
.generic-color:hover > .color-copy-overlay::before {
  transform: scale(1);
}
.color-outputs {
  display: grid;
  gap: var(--base-4);
  grid-auto-columns: 180px;
  grid-auto-rows: 60px;
  justify-content: center;
}
.color-output {
  border-radius: 1000px;
}
.color-output--no-theme-foo {
  background-color: #c7295d;
}
.color-output--no-theme-bar {
  background-color: #f4bbce;
}
.color-output--no-theme-qux {
  border: 4px solid;
  background-color: #f9dde6;
  border-color: #f4bbce;
}
.divider-type {
  height: 1px;
  border-top: 1px solid;
}
.tsc-column .divider-type--default {
  border-color: rgba(0, 0, 0, 0.12);
}
.tsc-column.theme-dark .divider-type--default {
  border-color: rgba(255, 255, 255, 0.18);
}
.tsc-column .divider-type--prominent {
  border-color: rgba(0, 0, 0, 0.24);
}
.tsc-column.theme-dark .divider-type--prominent {
  border-color: rgba(255, 255, 255, 0.3);
}
.tsc-column .divider-type--block {
  border-color: rgba(0, 0, 0, 0.12);
}
.tsc-column.theme-dark .divider-type--block {
  border-color: #000000;
}

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