/* page-components.php / page-project-components.php のショーケース表示専用 */
.showcase-swatch {
  width: 96px;
  height: 96px;
}
.showcase-caption {
  line-height: 1.2;
}
.showcase-code {
  font-size: 0.9em;
  font-family: monospace;
}

.showcase-swatch--main {
  background: var(--main);
}
.showcase-swatch--main-light {
  background: var(--main-light);
}
.showcase-swatch--main-dark {
  background: var(--main-dark);
}
.showcase-swatch--sub {
  background: var(--sub);
}
.showcase-swatch--sub-light {
  background: var(--sub-light);
}
.showcase-swatch--sub-dark {
  background: var(--sub-dark);
}
.showcase-swatch--sub2 {
  background: var(--sub2);
}
.showcase-swatch--sub2-light {
  background: var(--sub2-light);
}
.showcase-swatch--sub2-dark {
  background: var(--sub2-dark);
}
.showcase-swatch--gray {
  background: var(--gray);
}
.showcase-swatch--gray-light {
  background: var(--gray-light);
}
.showcase-swatch--gray-dark {
  background: var(--gray-dark);
}

/* 見本のコード表示・コピーボタン。 */
.demo-code {
  position: relative;
  margin: var(--space-sm) 0 var(--space-lg);
}
.demo-code pre {
  background: var(--gray-light);
  border: 1px solid var(--gray);
  border-radius: 4px;
  padding: var(--space-sm) var(--space-md);
  overflow-x: auto;
  margin: 0;
}
.demo-code code {
  color: var(--gray-dark);
  font-size: var(--fs-sm);
}
.demo-code__copy {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--gray-dark);
  border: 1px solid var(--gray);
  background: var(--bs-white);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
}
.demo-code__copy:hover {
  border-color: var(--main);
  color: var(--main);
}