/* =========================================================
   共通お気に入りボタン
   ========================================================= */

.favorite-button {
    cursor: pointer;
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        opacity 0.2s ease;
}

.favorite-button__icon {
    display: inline-block;
/*
    margin-right: 0.05em;
*/
    color: #b7b7b7;
    line-height: 1;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

/* マウス操作できる端末だけ hover 演出を有効にする */
@media (hover: hover) and (pointer: fine) {
    .favorite-button:hover .favorite-button__icon {
        transform: scale(1.08);
    }
}

.favorite-button.is-favorite .favorite-button__icon {
    color: #fff;
}

.favorite-button.is-favorite {
    color: #fff;
}

/* キーボード操作時のフォーカス表示 */
.favorite-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* 既存の .shop-card__favorite span の影響を文字部分だけ解除 */
.shop-card__favorite .favorite-button__label {
    font-size: inherit;
    line-height: inherit;
		position: relative;
    left: -2px;
}

/* 登録済み */
.shop-card__favorite.is-favorite {
    color: #fff;
    border-color: var(--color-pink);
    background: var(--color-pink);
}

.shop-card__favorite.is-favorite .favorite-button__icon {
    color: #fff;
}

/*
 * スマホ・タッチ端末対策
 * Chrome等ではタップ後に :hover が残る場合があるため、
 * 未登録状態へ戻した直後の見た目を明示的に初期状態へ戻す。
 */
@media (hover: none), (pointer: coarse) {
    .shop-card__favorite:not(.is-favorite),
    .shop-card__favorite:not(.is-favorite):hover,
    .shop-card__favorite:not(.is-favorite):focus {
        color: var(--color-pink);
        border-color: var(--color-pink);
        background: #fff;
    }

    .shop-card__favorite:not(.is-favorite) .favorite-button__icon,
    .shop-card__favorite:not(.is-favorite):hover .favorite-button__icon,
    .shop-card__favorite:not(.is-favorite):focus .favorite-button__icon {
        color: #b7b7b7;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .favorite-button,
    .favorite-button__icon {
        transition: none;
    }
}