/**
 * @file favorite-button.css
 * @description お気に入りボタンのスタイルシート
 * @version 1.0.0
 * @created 2024-03-20
 * @last_updated 2024-03-20
 * @features
 *   - お気に入りボタンの基本スタイル
 *   - ホバー・フォーカス効果
 *   - お気に入り済み状態のスタイル
 *   - レスポンシブ対応
 *   - アニメーション効果
 * @selectors
 *   - .mds-favorite-button
 *   - .mds-favorite-button.is-favorited
 *   - .mds-favorite-button:hover
 *   - .mds-favorite-button:focus
 *   - .mds-favorite-icon
 *   - .mds-favorite-text
 * @breakpoints
 *   - mobile: 768px以下
 *   - tablet: 769px-1024px
 *   - desktop: 1025px以上
 */

/* Material Icons フォント読み込み */
@import url('https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&display=swap');

/* フォールバック用の追加読み込み */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons+Outlined');

/* =====================================
   お気に入りボタン基本スタイル
   ===================================== */

.mds-favorite-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    font-size: inherit;
    line-height: 1.5;
    transition: all 0.3s ease;
    text-decoration: none;
    outline: none;
}

.mds-favorite-button:hover {
    /* ホバー効果はアニメーション設定で制御 */
}

/* プレースホルダー状態 - 初期表示を透明に */
.mds-favorite-button.mds-placeholder {
    position: relative;
    min-height: 36px; /* ボタンの最小高さを維持 */
}

/* プレースホルダー時の初期表示制御 - 設定済みの場合は表示 */
.mds-favorite-button.mds-placeholder:not(.mds-settings-ready) .mds-favorite-icon,
.mds-favorite-button.mds-placeholder:not(.mds-settings-ready) .mds-favorite-text {
    visibility: hidden !important;
}

/* プレースホルダー削除後の復元 */
.mds-favorite-button.mds-loaded .mds-favorite-icon,
.mds-favorite-button.mds-loaded .mds-favorite-text {
    visibility: visible !important;
}

/* プレースホルダー時の背景ローダー（オプション） */
.mds-favorite-button.mds-placeholder::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: inherit;
}

/* ローディング状態のスタイル（デザイン適用に影響しないように） */
.mds-favorite-button.mds-loading {
    /* opacityやdisabledの制御は削除 - デザインが適用されるように */
    transition: all 0.3s ease;
}

/* ロード完了時のアニメーション */
.mds-favorite-button.mds-loaded {
    visibility: visible;
    animation: mds-favorite-fadein 0.3s ease;
}

@keyframes mds-favorite-fadein {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mds-favorite-button:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

.mds-favorite-button:active {
    /* アクティブ効果はアニメーション設定で制御 */
}

/* =====================================
   お気に入り済み状態
   ===================================== */

.mds-favorite-button.is-favorited {
    /* お気に入り済みの視覚表現 */
    /* アイコン・カラーの変更 */
}

.mds-favorite-button.is-favorited:hover {
    /* お気に入り済みホバー時 */
}

/* =====================================
   アイコン・テキスト要素
   ===================================== */

.mds-favorite-icon {
    /* アイコンの基本スタイル */
    font-family: 'Material Icons', 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Material Icons のスタイル適用 */
.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outlined';
}

.mds-favorite-text {
    /* テキストの基本スタイル */
    /* フォント・間隔調整 */
}

/* アイコンのみ表示オプション */
.mds-favorite-button.icon-only .mds-favorite-text {
    display: none !important;
}

.mds-favorite-button.icon-only {
    min-width: auto;
    padding: 8px !important;
}

/* =====================================
   アニメーション効果
   ===================================== */

/* アニメーションなし */
.mds-favorite-button.animation-none:hover {
    transform: none;
    box-shadow: none;
}

.mds-favorite-button.animation-none:active {
    transform: none;
}

/* フェードアニメーション */
.mds-favorite-button.animation-fade:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* スケールアニメーション */
.mds-favorite-button.animation-scale:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

.mds-favorite-button.animation-scale:active {
    transform: scale(0.95);
}

/* パルスアニメーション */
@keyframes mds-favorite-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.mds-favorite-button.animation-pulse:hover {
    animation: mds-favorite-pulse 0.6s ease-in-out;
}

/* バウンスアニメーション */
@keyframes mds-favorite-bounce {
    0%, 100% { transform: translateY(0); }
    25% { transform: translateY(-4px); }
    50% { transform: translateY(-2px); }
    75% { transform: translateY(-1px); }
}

.mds-favorite-button.animation-bounce:hover {
    animation: mds-favorite-bounce 0.5s ease;
}

/* シャドウアニメーション */
.mds-favorite-button.animation-shadow:hover {
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
    transition: box-shadow 0.3s ease;
}

/* =====================================
   Material Icons 調整
   ===================================== */

.mds-favorite-icon.material-icons,
.mds-favorite-icon.material-icons-outlined {
    font-family: 'Material Icons', 'Material Icons Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

/* アイコンサイズ調整 */
.mds-favorite-icon.icon-size-80 { font-size: calc(18px * 0.8); }
.mds-favorite-icon.icon-size-90 { font-size: calc(18px * 0.9); }
.mds-favorite-icon.icon-size-100 { font-size: calc(18px * 1.0); }
.mds-favorite-icon.icon-size-110 { font-size: calc(18px * 1.1); }
.mds-favorite-icon.icon-size-120 { font-size: calc(18px * 1.2); }

/* アイコンウェイトCSS適用 */
.mds-favorite-icon.icon-weight-100 { font-weight: 100; }
.mds-favorite-icon.icon-weight-200 { font-weight: 200; }
.mds-favorite-icon.icon-weight-300 { font-weight: 300; }
.mds-favorite-icon.icon-weight-400 { font-weight: 400; }
.mds-favorite-icon.icon-weight-500 { font-weight: 500; }
.mds-favorite-icon.icon-weight-600 { font-weight: 600; }
.mds-favorite-icon.icon-weight-700 { font-weight: 700; }
.mds-favorite-icon.icon-weight-800 { font-weight: 800; }
.mds-favorite-icon.icon-weight-900 { font-weight: 900; }

/* =====================================
   文字サイズ設定
   ===================================== */

.mds-favorite-button.text-size-8 { font-size: 8px !important; }
.mds-favorite-button.text-size-10 { font-size: 10px !important; }
.mds-favorite-button.text-size-12 { font-size: 12px !important; }
.mds-favorite-button.text-size-14 { font-size: 14px !important; }
.mds-favorite-button.text-size-16 { font-size: 16px !important; }
.mds-favorite-button.text-size-18 { font-size: 18px !important; }

/* rem単位対応 */
.mds-favorite-button.text-size-8.use-rem { font-size: 0.8rem !important; }
.mds-favorite-button.text-size-10.use-rem { font-size: 1rem !important; }
.mds-favorite-button.text-size-12.use-rem { font-size: 1.2rem !important; }
.mds-favorite-button.text-size-14.use-rem { font-size: 1.4rem !important; }
.mds-favorite-button.text-size-16.use-rem { font-size: 1.6rem !important; }
.mds-favorite-button.text-size-18.use-rem { font-size: 1.8rem !important; }

/* =====================================
   ボタンサイズ設定
   ===================================== */

.mds-favorite-button.button-size-small { padding: 6px 12px !important; }
.mds-favorite-button.button-size-medium { padding: 8px 16px !important; }
.mds-favorite-button.button-size-large { padding: 12px 20px !important; }

/* rem単位対応 - 最高優先順位 */
.mds-favorite-button.button-size-small.use-rem { padding: 0.6rem 1.2rem !important; }
.mds-favorite-button.button-size-medium.use-rem { padding: 0.8rem 1.6rem !important; }
.mds-favorite-button.button-size-large.use-rem { padding: 1.2rem 2rem !important; }

/* =====================================
   角丸設定
   ===================================== */

.mds-favorite-button.border-radius-none { border-radius: 0px !important; }
.mds-favorite-button.border-radius-small { border-radius: 4px !important; }
.mds-favorite-button.border-radius-medium { border-radius: 8px !important; }
.mds-favorite-button.border-radius-large { border-radius: 16px !important; }
.mds-favorite-button.border-radius-round { border-radius: 9999px !important; }

/* 角丸設定はpxのみ（rem単位対応なし） */

/* =====================================
   アイコン位置
   ===================================== */

.mds-favorite-button.icon-right { flex-direction: row-reverse; }
.mds-favorite-button.icon-left { flex-direction: row; }

/* =====================================
   ボタンスタイル適用
   ===================================== */

.mds-favorite-button.style-outline {
    background: transparent !important;
    border: 2px solid var(--outline-color, #667eea) !important;
    color: var(--outline-color, #667eea) !important;
}

.mds-favorite-button.style-outline.use-rem {
    border: 0.2rem solid var(--outline-color, #667eea) !important;
}

.mds-favorite-button.style-filled {
    background: var(--fill-color, #667eea) !important;
    border: 2px solid var(--fill-color, #667eea) !important;
    color: white !important;
}

.mds-favorite-button.style-filled.use-rem {
    border: 0.2rem solid var(--fill-color, #667eea) !important;
}

.mds-favorite-button.style-borderless {
    background: transparent !important;
    border: none !important;
    color: var(--outline-color, #667eea) !important;
    padding: 4px 8px !important;
}

.mds-favorite-button.style-borderless:hover {
    background: rgba(102, 126, 234, 0.1) !important;
}

.mds-favorite-button.style-borderless.is-favorited {
    color: var(--active-color, #dc3545) !important;
    background: rgba(220, 53, 69, 0.1) !important;
}

.mds-favorite-button.style-outline.is-favorited {
    background: var(--outline-color, #667eea) !important;
    color: white !important;
}

.mds-favorite-button.style-filled.is-favorited {
    background: var(--active-color, #dc3545) !important;
    border-color: var(--active-color, #dc3545) !important;
    color: white !important;
}

/* 新しいカスタムスタイル方式 */
.mds-favorite-button.style-custom {
    /* インラインスタイルでPHPから動的に設定される */
    transition: all 0.3s ease !important;
}

/* =====================================
   最小幅設定
   ===================================== */

.mds-favorite-button.min-width-none { min-width: unset !important; }
.mds-favorite-button.min-width-small { min-width: 80px !important; }
.mds-favorite-button.min-width-medium { min-width: 120px !important; }
.mds-favorite-button.min-width-large { min-width: 160px !important; }

/* rem単位対応 - 最高優先順位 */
.mds-favorite-button.min-width-none.use-rem { min-width: unset !important; }
.mds-favorite-button.min-width-small.use-rem { min-width: 8rem !important; }
.mds-favorite-button.min-width-medium.use-rem { min-width: 12rem !important; }
.mds-favorite-button.min-width-large.use-rem { min-width: 16rem !important; }

/* =====================================
   配置・レイアウト
   ===================================== */

/* wrapper削除のため、このセクションは不要 */

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

/* モバイル (768px以下) */
@media (max-width: 768px) {
    .mds-favorite-button {
        /* モバイル向け調整 */
    }
}

/* タブレット (769px-1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .mds-favorite-button {
        /* タブレット向け調整 */
    }
}

/* デスクトップ (1025px以上) */
@media (min-width: 1025px) {
    .mds-favorite-button {
        /* デスクトップ向け調整 */
    }
}

/* =====================================
   アクセシビリティ
   ===================================== */

.mds-favorite-button:focus-visible {
    /* キーボードフォーカス時 */
}

@media (prefers-reduced-motion: reduce) {
    /* アニメーション無効化設定 */
    .mds-favorite-button,
    .mds-favorite-button * {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================
   ダークモード対応
   ===================================== */

@media (prefers-color-scheme: dark) {
    .mds-favorite-button {
        /* ダークモード時のカラー調整 */
    }
}