/**
 * TextBasic コンポーネントのスタイル
 * レスポンシブ対応のテキスト表示スタイル
 */

.text-basic {
  // デフォルトスタイル
  position: relative;
  
  // キャプションスタイル
  &__caption {
    // PC版スタイル
    font-family: var(--caption-font-family, inherit);
    font-size: var(--caption-font-size-pc, inherit);
    line-height: var(--caption-line-height-pc, inherit);
    color: var(--caption-color, #666666);
    text-shadow: var(--caption-text-shadow, none);
    margin-bottom: var(--caption-to-title-spacing-pc, 16px);
    
    // エディター内でのスタイル調整
    &:empty {
      margin-bottom: 0;
    }
    
    // SP版スタイル
    @media (max-width: 767px) {
      font-size: var(--caption-font-size-sp, inherit);
      line-height: var(--caption-line-height-sp, inherit);
      margin-bottom: var(--caption-to-title-spacing-sp, 4vw);
    }
  }
  
  // タイトルスタイル  
  &__title {
    // PC版スタイル
    font-family: var(--title-font-family, inherit);
    font-size: var(--title-font-size-pc, inherit);
    line-height: var(--title-line-height-pc, inherit);
    color: var(--title-color, #2563eb);
    text-shadow: var(--title-text-shadow, none);
    margin-bottom: var(--title-to-description-spacing-pc, 16px);
    margin-top: 0;
    
    // エディター内でのスタイル調整
    &:empty {
      margin-bottom: 0;
    }
    
    // SP版スタイル
    @media (max-width: 767px) {
      font-size: var(--title-font-size-sp, inherit);
      line-height: var(--title-line-height-sp, inherit);
      margin-bottom: var(--title-to-description-spacing-sp, 4vw);
    }
  }
  
  // 説明スタイル
  &__description {
    // PC版スタイル
    font-family: var(--description-font-family, inherit);
    font-size: var(--description-font-size-pc, inherit);
    line-height: var(--description-line-height-pc, inherit);
    color: var(--description-color, #666666);
    text-shadow: var(--description-text-shadow, none);
    margin-bottom: var(--description-margin-pc, 0);
    margin-top: 0;
    
    // エディター内でのスタイル調整
    &:empty {
      margin-bottom: 0;
    }
    
    // SP版スタイル
    @media (max-width: 767px) {
      font-size: var(--description-font-size-sp, inherit);
      line-height: var(--description-line-height-sp, inherit);
      margin-bottom: var(--description-margin-sp, 0);
    }
  }
  
  // エディター内でのプレースホルダースタイル
  .block-editor-rich-text__editable {
    &[data-placeholder]:empty::before {
      opacity: 0.6;
      font-style: italic;
    }
  }
  
  // RichTextツールバーが表示される際のz-index調整
  .block-editor-rich-text__inline-toolbar {
    z-index: 999;
  }
}

// 編集画面でのデバッグ用スタイル（開発時のみ表示）
.editor-styles-wrapper .text-basic {
  // デバッグ情報の表示（開発時）
  &[data-debug="true"] {
    border: 1px dashed #ccc;
    padding: 10px;
    
    &::before {
      content: "TextBasic - Device: " attr(data-device-tab) " | Caption: " attr(data-caption-font-size-pc) " / " attr(data-caption-font-size-sp);
      font-size: 10px;
      color: #999;
      display: block;
      margin-bottom: 10px;
      font-family: monospace;
    }
  }
}

// レスポンシブ対応の共通スタイル
@media (max-width: 767px) {
  .text-basic {
    // SP版での全体調整があれば追加
  }
}

// ハイコントラストモード対応
@media (prefers-contrast: high) {
  .text-basic {
    &__caption,
    &__title,
    &__description {
      text-shadow: none !important;
    }
  }
}

// ダークモード対応（必要に応じて）
@media (prefers-color-scheme: dark) {
  .text-basic {
    // ダークモード用の調整があれば追加
  }
}

// アニメーション設定（必要に応じて）
.text-basic {
  &__caption,
  &__title,
  &__description {
    transition: color 0.3s ease, text-shadow 0.3s ease;
  }
}

// 印刷用スタイル
@media print {
  .text-basic {
    &__caption,
    &__title,
    &__description {
      color: black !important;
      text-shadow: none !important;
    }
  }
}