/* --------------------------------------------------------
 * 汎用ボタン
 * -------------------------------------------------------- */

.minolink-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 1em;
	border: none;
	border-radius: var(--wp--custom--radius--full);
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--semibold);
	line-height: var(--wp--custom--line-height--small);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

/* 黒塗り */
.minolink-btn-contrast {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.minolink-btn-contrast:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* 緑塗り */
.minolink-btn-primary,
.button-green {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.minolink-btn-primary:hover,
.button-green:hover {
	opacity: 0.85;
}

/* 白背景・緑枠・緑文字 */
.minolink-btn-primary-outlined {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--primary);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.minolink-btn-primary-outlined:hover {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--primary);
}

/* --------------------------------------------------------
 * お気に入りボタン
 * -------------------------------------------------------- */

.favorite-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width:172px;
	height: 36px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--full);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--semibold);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.favorite-button:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.favorite-button__icon {
	width: 20px;
	height: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}


@media (min-width: 1024px) {
	.favorite-button {
		width:240px;
		height: 50px;
		font-size: 15px;
	}
	.favorite-button__icon {
		width: 1em;
		height: 1em;
	}	
}

.favorite-button__icon {
	width: 1em;
	height: 1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.favorite-button__icon-svg {
	width: 100%;
	height: 100%;
	display: none;
}

.favorite-button__icon-svg--default {
	display: block;
}

@media (hover: hover) {
	.favorite-button:hover {
		background: var(--wp--preset--color--primary-dark);
		border-color: var(--wp--preset--color--base);
		color: var(--wp--preset--color--base);
	}

	.favorite-button:hover .favorite-button__icon-svg--default {
		display: none;
	}

	.favorite-button:hover .favorite-button__icon-svg--hover {
		display: block;
	}
}

.favorite-button.is-active {
	background: var(--wp--preset--color--gray-100);
	border-color: var(--wp--preset--color--primary-light);
	color: var(--wp--preset--color--primary-light);
}

.favorite-button.is-active .favorite-button__icon-svg--default,
.favorite-button.is-active .favorite-button__icon-svg--hover {
	display: none;
}

.favorite-button.is-active .favorite-button__icon-svg--active {
	display: block;
}

favorite-button {
	display: inline-block;
}