/* =============================================================
   components/carousel-dots.css
   カルーセルインジケータ（ダイヤ型ドット）
   Figma 実測値: 10×10pxコンテナ / 7.071px正方形を45°回転
   ============================================================= */

/* コンテナ: 白背景・高さ25px・overflow hidden */
.carousel-dots {
  background: var(--color-white);
  height: 25px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* インジケータ列: flex・gap 6px */
.carousel-dots__track {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 各ドットコンテナ: 10×10px */
.carousel-dots__item {
  width: 10px;
  height: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ダイヤ形状: 7.071×7.071px の正方形を45°回転 */
.carousel-dots__diamond {
  width: 7.071px;
  height: 7.071px;
  transform: rotate(45deg);
  flex-shrink: 0;
  /* デフォルト: 非アクティブ（枠線のみ） */
  border: 0.5px solid var(--color-indicator);  /* #888888 */
  background: transparent;
}

/* アクティブ: 塗りつぶし */
.carousel-dots__item.is-active .carousel-dots__diamond {
  background: var(--color-indicator);  /* #888888 */
  border-color: var(--color-indicator);
}