/**
 * お気に入りボタンスタイル
 *
 * @layer components
 * @package TKLB
 */

@layer components {
    /* ========================================
     * お気に入りボタン - 基本スタイル
     * ======================================== */

    :where(.c-favorite-btn) {
        /* レイアウト */
        display: inline-flex;
        align-items: center;
        gap: var(--wp--preset--spacing--2-xs, 0.5rem);

        /* ボタンスタイル */
        padding: var(--wp--preset--spacing--2-xs, 0.5rem) var(--wp--preset--spacing--xs, 0.75rem);
        border: 1px solid var(--wp--preset--color--gray-300, #d1d5db);
        border-radius: var(--wp--custom--border-radius--md, 0.375rem);
        background-color: var(--wp--preset--color--white, #ffffff);

        /* テキストスタイル */
        color: var(--wp--preset--color--gray-700, #374151);
        font-size: var(--wp--preset--font-size--sm, 0.875rem);
        font-weight: 500;
        line-height: 1;

        /* アニメーション */
        transition: all var(--wp--custom--transition--normal, 0.2s) ease;
        cursor: pointer;

        /* リセット */
        appearance: none;
        text-decoration: none;
    }

    /* ========================================
     * ホバー・フォーカス状態
     * ======================================== */

    :where(.c-favorite-btn:hover) {
        border-color: var(--wp--preset--color--secondary, #db57a5);
        background-color: var(--wp--preset--color--gray-50, #f9fafb);
        transform: translateY(-1px);
    }

    :where(.c-favorite-btn:focus) {
        outline: 2px solid var(--wp--preset--color--secondary, #db57a5);
        outline-offset: 2px;
    }

    :where(.c-favorite-btn:active) {
        transform: translateY(0);
    }

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

    :is(.c-favorite-btn.is-favorited) {
        background-color: var(--wp--preset--color--secondary, #db57a5) !important;
        border-color: var(--wp--preset--color--secondary, #db57a5) !important;
        color: var(--wp--preset--color--white, #ffffff) !important;
        box-shadow: none !important;
    }

    :is(.c-favorite-btn.is-favorited:hover) {
        background-color: var(--wp--preset--color--secondary-dark, #c2185b) !important;
        border-color: var(--wp--preset--color--secondary-dark, #c2185b) !important;
        color: var(--wp--preset--color--white, #ffffff) !important;
        box-shadow: none !important;
    }

    /* ========================================
     * アイコン
     * ======================================== */

    :where(.c-favorite-btn__icon) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    :where(.c-favorite-btn__icon) svg {
        width: 100%;
        height: 100%;
    }

    /* アウトラインアイコン（未登録時） */
    :where(.c-favorite-btn__icon-outline) {
        display: block;
        stroke: currentColor;
    }

    :where(.c-favorite-btn__icon-filled) {
        display: none;
        fill: currentColor;
    }

    /* 登録済み時はアイコン切り替え */
    :where(.c-favorite-btn.is-favorited .c-favorite-btn__icon-outline) {
        display: none;
    }

    :where(.c-favorite-btn.is-favorited .c-favorite-btn__icon-filled) {
        display: block;
    }

    /* ========================================
     * テキスト
     * ======================================== */

    :where(.c-favorite-btn__text) {
        display: inline-block;
        white-space: nowrap;
    }

    /* テキスト切り替え */
    :where(.c-favorite-btn__text-remove) {
        display: none;
    }

    :where(.c-favorite-btn.is-favorited .c-favorite-btn__text-add) {
        display: none;
    }

    :where(.c-favorite-btn.is-favorited .c-favorite-btn__text-remove) {
        display: inline;
    }

    /* ========================================
     * カウント表示
     * ======================================== */

    :where(.c-favorite-btn__count) {
        display: inline-block;
        font-size: var(--wp--preset--font-size--xs, 0.75rem);
        opacity: 0.7;
    }

    /* ========================================
     * サイズバリエーション
     * ======================================== */

    /* Small */
    :where(.c-favorite-btn--small) {
        padding: var(--wp--preset--spacing--3-xs, 0.375rem) var(--wp--preset--spacing--2-xs, 0.5rem);
        font-size: var(--wp--preset--font-size--xs, 0.75rem);
        gap: var(--wp--preset--spacing--3-xs, 0.375rem);
    }

    :where(.c-favorite-btn--small .c-favorite-btn__icon) {
        width: 1rem;
        height: 1rem;
    }

    /* Medium (default) */
    :where(.c-favorite-btn--medium) {
        /* デフォルトスタイル適用済み */
    }

    /* Large */
    :where(.c-favorite-btn--large) {
        padding: var(--wp--preset--spacing--xs, 0.75rem) var(--wp--preset--spacing--sm, 1rem);
        font-size: var(--wp--preset--font-size--md, 1rem);
        gap: var(--wp--preset--spacing--xs, 0.75rem);
    }

    :where(.c-favorite-btn--large .c-favorite-btn__icon) {
        width: 1.5rem;
        height: 1.5rem;
    }

    /* ========================================
     * アイコンのみモード
     * ======================================== */

    :where(.c-favorite-btn--icon-only) {
        padding: var(--wp--preset--spacing--2-xs, 0.5rem);
        width: 2.5rem;
        height: 2.5rem;
        justify-content: center;
    }

    :where(.c-favorite-btn--icon-only.c-favorite-btn--small) {
        width: 2rem;
        height: 2rem;
    }

    :where(.c-favorite-btn--icon-only.c-favorite-btn--large) {
        width: 3rem;
        height: 3rem;
    }

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

    /* 追加時のパルスアニメーション */
    @keyframes favorite-pulse {
        0%, 100% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.15);
        }
    }

    :where(.c-favorite-btn.is-animating) {
        animation: favorite-pulse 0.4s ease;
    }

    /* ========================================
     * ローディング状態
     * ======================================== */

    :where(.c-favorite-btn.is-loading) {
        opacity: 0.6;
        cursor: wait;
        pointer-events: none;
    }

    /* ========================================
     * レスポンシブ調整
     * ======================================== */

    @media (max-width: 640px) {
        /* スマホではテキストを短縮可能 */
        :where(.c-favorite-btn--icon-only-mobile) {
            padding: var(--wp--preset--spacing--2-xs, 0.5rem);
            width: 2.5rem;
            height: 2.5rem;
            justify-content: center;
        }

        :where(.c-favorite-btn--icon-only-mobile .c-favorite-btn__text) {
            display: none;
        }
    }
}