/**
 * MDS Infinite Slider Block - Styles
 * 無限スクロール専用スタイル - 任意のブロック対応
 */

/* =============================================================================
   無限スライダー基本スタイル
   ============================================================================= */

.wp-block-mds-infinite-slider {
  width: 100%;
  position: relative;
  overflow: hidden;
}

/* =============================================================================
   CSS無限スクロールアニメーション - 2025年ベストプラクティス版
   ============================================================================= */

/* 左方向スクロール用キーフレーム - 理論1セット幅ベースでシームレスループ */
@keyframes marquee-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(var(--move-distance, 0));
  }
}

/* 右方向スクロール用キーフレーム */
@keyframes marquee-scroll-right {
  0% {
    transform: translateX(var(--move-distance, 0));
  }
  100% {
    transform: translateX(0);
  }
}

/* 無限スクロール基本構造 */
.wp-block-mds-infinite-slider.infinite-scroll-enabled {
  overflow: hidden !important;
  display: flex !important;
  user-select: none;
}

/* JavaScriptアニメーションモードでWaveエフェクトの場合 */
.wp-block-mds-infinite-slider.js-animation-active[data-animation-effect="wave"] {
  overflow: visible !important;
  /* paddingはJavaScriptで動的に設定 */
}

/* 2つのコンテンツグループ（オリジナル + ミラー） */
.wp-block-mds-infinite-slider.infinite-scroll-enabled .infinite-scroll-group {
  flex-shrink: 0;
  display: flex;
  width: fit-content; /* コンテンツサイズに合わせる */
  min-width: fit-content; /* 最小幅もコンテンツに合わせる */
  align-items: flex-start;
  will-change: transform;
  justify-content: flex-start; /* 左寄せ */
  gap: var(--mds-space-between, 0px); /* Flexbox gapで間隔制御 */
}

/* 少ない要素の場合もgapで一貫した間隔を維持 */
.wp-block-mds-infinite-slider.infinite-scroll-enabled
  .infinite-scroll-group.few-elements {
  justify-content: flex-start; /* gapで間隔制御 */
}

/* さらに少ない要素（2個以下）の場合も同様 */
.wp-block-mds-infinite-slider.infinite-scroll-enabled
  .infinite-scroll-group.very-few-elements {
  justify-content: flex-start; /* gapで間隔制御 */
}

/* グループ内の各要素のサイズ制御（margin-rightを削除） */
.wp-block-mds-infinite-slider.infinite-scroll-enabled
  .infinite-scroll-group
  > * {
  flex-shrink: 0;
  min-width: var(--mds-child-min-width, auto);
  max-width: var(--mds-child-max-width, none);
  width: auto; /* 自然な幅に調整 */
  box-sizing: border-box;
  margin: 0; /* 全てのmarginを0に */
}

/* 左方向スクロールアニメーション（CSSモードのみ） */
.wp-block-mds-infinite-slider.infinite-scroll-enabled.scroll-left:not(
    .js-animation-active
  )
  .infinite-scroll-group {
  animation: marquee-scroll-left var(--animation-duration, 10s) linear infinite;
}

/* 右方向スクロールアニメーション（CSSモードのみ） */
.wp-block-mds-infinite-slider.infinite-scroll-enabled.scroll-right:not(
    .js-animation-active
  )
  .infinite-scroll-group {
  animation: marquee-scroll-right var(--animation-duration, 10s) linear infinite;
}

/* ホバー時の一時停止（CSSモードのみ） */
.wp-block-mds-infinite-slider.infinite-scroll-enabled.pause-on-hover:not(
    .js-animation-active
  ):hover
  .infinite-scroll-group {
  animation-play-state: paused;
}

/* JavaScriptアニメーションモード */

.wp-block-mds-infinite-slider.js-animation-active .infinite-scroll-group {
  animation: none !important;
  -webkit-animation: none !important;
}

/* アクセシビリティ: 動きを減らすオプション */
@media (prefers-reduced-motion: reduce) {
  .wp-block-mds-infinite-slider.infinite-scroll-enabled .infinite-scroll-group {
    animation-play-state: paused;
  }
}

/* =============================================================================
   直下の子ブロック要素（任意のブロック）
   ============================================================================= */

.wp-block-mds-infinite-slider > div > *,
.wp-block-mds-infinite-slider .wp-block-group__inner-container > *,
.wp-block-mds-infinite-slider .infinite-scroll-inner-wrapper > * {
  flex-shrink: 0; /* 幅を維持 */
  min-width: var(--mds-child-min-width, auto);
  max-width: var(--mds-child-max-width, none);
  min-height: var(--mds-child-min-height, auto);
  max-height: var(--mds-child-max-height, none);
}

/* 共通サイズ設定が適用された場合 */
.wp-block-mds-infinite-slider[style*="--mds-child-width"]
  .wp-block-group__inner-container
  > *,
.wp-block-mds-infinite-slider[style*="--mds-child-width"]
  .infinite-scroll-inner-wrapper
  > * {
  width: var(--mds-child-width) !important;
}

.wp-block-mds-infinite-slider[style*="--mds-child-height"] > div > *,
.wp-block-mds-infinite-slider[style*="--mds-child-height"]
  .wp-block-group__inner-container
  > *,
.wp-block-mds-infinite-slider[style*="--mds-child-height"]
  .infinite-scroll-inner-wrapper
  > * {
  height: var(--mds-child-height) !important;
}

/* より具体的なセレクタでサイズを強制適用 */
.wp-block-mds-infinite-slider .infinite-scroll-inner-wrapper > * {
  width: var(--mds-child-width, auto);
  height: var(--mds-child-height, auto);
  min-width: var(--mds-child-min-width, auto);
  max-width: var(--mds-child-max-width, none);
  min-height: var(--mds-child-min-height, auto);
  max-height: var(--mds-child-max-height, none);
  margin: 0; /* marginを完全に削除 */
}

/* 特定ブロックタイプに対する優先度の高いルール */
.wp-block-mds-infinite-slider .infinite-scroll-inner-wrapper > .wp-block-group,
.wp-block-mds-infinite-slider .infinite-scroll-inner-wrapper > .wp-block-image,
.wp-block-mds-infinite-slider
  .infinite-scroll-inner-wrapper
  > .wp-block-paragraph,
.wp-block-mds-infinite-slider
  .infinite-scroll-inner-wrapper
  > .wp-block-heading,
.wp-block-mds-infinite-slider
  .infinite-scroll-inner-wrapper
  > .wp-block-button {
  width: var(--mds-child-width, auto) !important;
  height: var(--mds-child-height, auto) !important;
  min-width: var(--mds-child-min-width, auto) !important;
  max-width: var(--mds-child-max-width, none) !important;
  min-height: var(--mds-child-min-height, auto) !important;
  max-height: var(--mds-child-max-height, none) !important;
  margin: 0 !important; /* marginを完全に削除 */
}

/* Flexbox gapは親要素（.infinite-scroll-group）で制御するため、子要素のmarginは不要 */
.wp-block-mds-infinite-slider.infinite-scroll-enabled .infinite-scroll-group > * {
  margin: 0 !important;
}

.wp-block-mds-infinite-slider.infinite-scroll-enabled .infinite-scroll-group .wp-block-image figure {
  margin: 0 !important;
}

/* =============================================================================
   クローンされた要素（バッファ用）
   ============================================================================= */

.infinite-clone {
  flex-shrink: 0;
}

/* クローン要素内のリンクやボタンの無効化（意図しない重複実行防止） */
.infinite-clone a,
.infinite-clone button,
.infinite-clone input,
.infinite-clone select,
.infinite-clone textarea {
  pointer-events: none;
}

/* =============================================================================
   共通ブロック要素のスタイル調整
   ============================================================================= */

/* 段落ブロック */
.wp-block-mds-infinite-slider .wp-block-paragraph {
  margin-bottom: 0;
}

/* 画像ブロック */
.wp-block-mds-infinite-slider .wp-block-image {
  margin-bottom: 0;
}

/* ボタンブロック */
.wp-block-mds-infinite-slider .wp-block-button {
  margin-bottom: 0;
}

/* 見出しブロック */
.wp-block-mds-infinite-slider .wp-block-heading {
  margin-bottom: 0;
}

/* カラムブロック */
.wp-block-mds-infinite-slider .wp-block-columns {
  margin-bottom: 0;
}

/* グループブロック */
.wp-block-mds-infinite-slider .wp-block-group {
  margin-bottom: 0;
}

/* =============================================================================
   エディター専用スタイル
   ============================================================================= */

.mds-infinite-slider-editor {
  border: 2px dashed #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
}

.infinite-slider-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0e0e0;
}

.infinite-slider-header h3 {
  margin: 0;
  font-size: 18px;
  color: #1e1e1e;
}

.infinite-scroll-indicator {
  background: #007cba;
  color: white;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

.infinite-scroll-indicator .direction-left {
  color: #fff;
}

.infinite-scroll-indicator .direction-right {
  color: #fff;
}

.content-container {
  min-height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 12px;
  background: #fff;
}

/* エディター内のInnerBlocks調整 */
.content-container .block-editor-inner-blocks {
  width: 100%;
}

.content-container .block-editor-block-list__layout {
  display: flex;
  flex-wrap: wrap;
  gap: inherit;
}

/* =============================================================================
   レスポンシブデザイン
   ============================================================================= */

@media (max-width: 768px) {
  .wp-block-mds-infinite-slider {
    --mds-space-between: 16px;
  }

  .infinite-slider-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .infinite-scroll-indicator {
    font-size: 11px;
    padding: 3px 8px;
  }
}

@media (max-width: 480px) {
  .wp-block-mds-infinite-slider {
    --mds-space-between: 12px;
  }

  .mds-infinite-slider-editor {
    padding: 16px;
  }
}