/*!********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** 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/demo-color/styles.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************************************/
.d-color {
  --item-size: 120px;
}
@media (min-width: 480px) {
  .d-color {
    display: flex;
    margin: 1em 0;
    gap: 1rem;
  }
}

.d-color__items {
  display: flex;
  flex: 0 1 100%;
  flex-wrap: wrap;
  margin: 1em 0;
  gap: 1rem;
}

.d-color__item {
  cursor: copy;
}

.d-color__name {
  flex: 0 0 180px;
}

.d-color__chip {
  aspect-ratio: 5/2;
  width: 100%;
  display: block;
  flex: 0 1 100%;
  border-radius: 3px;
  border: 1px solid var(--theme-border-color);
}

.d-color__label {
  font-size: 0.65rem;
  word-break: break-all;
}

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