@use "../global/mixin";

@keyframes pchppFlash {

	20% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	80% {
		opacity: 1;
	}
}


// memo: フロントでも読み込ませる
.pochipp-box {
	position: relative;
	display: grid;
	grid-gap: 0 24px;
	grid-template-areas:
		"areaImg areaBody"
		"areaBtns areaBtns";
	grid-template-rows: auto auto;
	grid-template-columns: 100px 1fr;
	max-width: 960px;
	padding: 24px !important;
	color: #353535;
	font-size: 16px;
	background: #fff;
	box-shadow: 0 1px 8px -4px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.02);

	// テーマに左右されないように詳細度上げるけど、importantは使いたくないパラメータ
	body:not(#__) & {
		margin: 2em auto;
	}

	// @include mixin.tab {
	// }

	&.is-vrtcl {

		@include mixin.tab {
			display: block;
			// width: 88%;
			max-width: 400px;

			.pochipp-box__btns {
				// display: block;

				.pochipp-box__btnwrap {
					flex-basis: 100%;
					min-width: 100%;
					max-width: 100%;
				}
			}

			.pochipp-box__image {
				margin-bottom: 16px;

				img {
					width: 40%;
					max-width: 120px;
					margin: 0 auto;
				}
			}
		}

	}

	@include mixin.mobile {
		grid-gap: 0 16px;
		grid-template-columns: 25% 1fr;
		width: 88%;
		box-sizing: border-box;
		font-size: 13px;
	}

	@include mixin.small {
		width: 100%;
		box-sizing: border-box;
		padding: 16px !important;
		font-size: 14px;
	}


	.pochipp-box__logo {
		position: absolute;
		right: 3px;
		bottom: 4px;
		display: flex;
		// flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0.2;

		img {
			display: block;
			width: 12px;
			height: 12px;
			margin: 0 !important;
		}

		span {
			display: block;
			font-size: 10px;
			line-height: 1;
			// margin-left: 8px;
			transform: scale(0.8);
		}
	}
}

.pochipp-box__image {
	grid-area: areaImg;
	margin: 0;
	padding: 0;

	a {
		display: block;
		width: 100%;
		text-decoration: none !important;
	}

	img {
		display: block;
		width: 100%;
		height: auto;
		max-height: 160px;
		object-fit: contain;
	}
}

.pochipp-box__body {
	grid-area: areaBody;
	margin: 0;
	padding: 0;
}

.pochipp-box__title {
	margin: 0 0 8px;
	font-weight: bold;
	line-height: 1.6;

	a {
		display: block;
		width: 100%;
		color: inherit !important;
		text-decoration: none !important;
	}
}

.pochipp-box__info {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	opacity: 0.75;
}

.pochipp-box__price {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.5;

	@include mixin.mobile {
		font-size: 12px;
	}

	span {
		font-size: 10px;
		opacity: 0.75;
	}
}

.pochipp-box__review {
	display: flex;
	margin-top: 4px;

	a {
		display: flex;
		align-items: center;
		text-decoration: none !important;
	}

	img + span {
		margin-left: 4px;
	}

	span {
		font-size: 12px;
		color: #599ba3 !important;

		&.dashicons {
			display: flex;
			align-items: center;
			font-size: 16px;
		}
	}
}

.pochipp-box__btns {

	// 詳細度強く
	.pochipp-box & {
		position: relative;
		left: -4px;
		display: flex;
		flex-wrap: wrap;
		grid-area: areaBtns;
		align-items: flex-end;
		width: calc(100% + 8px);
		margin: 12px 0 0;
		padding: 0;
	}
}

.pochipp-box__btnwrap {

	span {
		width: 100%;
	}

	// 詳細度強く
	.pochipp-box & {
		min-width: max-content;
		padding: 4px;
	}

	&.-on-sale {
		order: -1;
	}

	@media screen and (min-width: 1100px) {

		[data-maxclmn-pc="fit"] > & {
			flex: 1;
			max-width: 50%;
			font-size: 15px;
		}

		[data-maxclmn-pc="3"] > & {
			flex: 0 0 33.3%;
			font-size: 15px;
		}

		[data-maxclmn-pc="2"] > & {
			flex-basis: 50%;
			max-width: 50%;
		}
	}

	@media screen and (max-width: 1099px) {
		flex-basis: 50%;
		min-width: 50% !important;
		max-width: 50%;
	}


	@include mixin.mobile {

		[data-maxclmn-mb="1"] > & {
			flex-basis: 100%;
			max-width: 100%;
			font-size: 15px;
		}

		[data-maxclmn-mb="2"] > & {
			font-size: 13px;

			&.-on-sale {
				flex-basis: 100%;
				max-width: 100%;
			}
		}

	}
}


// 詳細度強く
.pochipp-box .pochipp-box__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	padding: 12px;
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.5px;
	text-align: center;
	text-decoration: none !important;

	&:hover {
		opacity: 0.8;
	}

	@include mixin.mobile {
		padding: 12px 10px;
	}

	img {
		position: absolute;
		display: block;
		width: 1px;
		height: 1px;
		visibility: hidden;
		opacity: 0;
	}

	span {
		font-size: inherit;
		line-height: 1;
	}

}

@include mixin.mobile {

	[data-maxclmn-mb="2"] > .-long-text:not(.-on-sale) .pochipp-box__btn {
		font-size: 12px;
		line-height: 13px;
		letter-spacing: 0;
		white-space: nowrap;
	}
}


.pochipp-box__saleInfo {

	.pochipp-box  & {
		font-size: 12px;
		line-height: 1;
		text-align: center;

		@include mixin.mobile {
			font-size: 11px;
		}
	}

	&.-top {
		margin-bottom: 4px;
		font-weight: bold;
	}

	[data-sale-effect="flash"] & {
		animation: 1.5s linear 0s infinite pchppFlash;
	}

	.pochipp-box__btnwrap.-amazon & {
		color: var(--pchpp-color-amazon);
	}

	.pochipp-box__btnwrap.-rakuten & {
		color: var(--pchpp-color-rakuten);
	}

	.pochipp-box__btnwrap.-yahoo & {
		color: var(--pchpp-color-yahoo);
	}

	.pochipp-box__btnwrap.-mercari & {
		color: var(--pchpp-color-mercari);
	}

	.pochipp-box__btnwrap.-custom & {
		color: var(--pchpp-color-custom);
	}

	.pochipp-box__btnwrap.-custom_2 & {
		color: var(--pchpp-color-custom-2);
	}

}

.pochipp-box__price[data-disp-price="off"] {
	display: none;
}

// ボタンスタイル
// --------------------------------------------------------
.pochipp-box[data-btn-radius="off"] {
	// border: solid 1px #ededed;
	border-radius: 1px;

	.pochipp-box__image img,
	.pochipp-box__btn,
	.pochipp-box__saleInfo {
		border-radius: 1px;
	}
}


.pochipp-box[data-btn-radius="on"] {
	border-radius: 4px;

	.pochipp-box__image img {
		border-radius: 4px;
	}

	.pochipp-box__btn,
	.pochipp-box__saleInfo {
		border-radius: 40px;
	}

}

.pochipp-box[data-btn-style="dflt"] {

	.pochipp-box__btn {
		position: relative;
		overflow: hidden;
		color: #fff !important;
		background-color: #3c3c3c;
		// box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2), inset 0 0 1px rgba(#fff, 0.2);
		box-shadow: 0 1px 4px -1px rgba(0, 0, 0, 0.2);

		&::before {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(175deg, #fff, transparent 50%, transparent 70%, #555);
			opacity: 0.1;
			content: "";
		}
	}

	.-amazon > .pochipp-box__btn {
		background: var(--pchpp-color-amazon);
	}

	.-rakuten > .pochipp-box__btn {
		background: var(--pchpp-color-rakuten);
	}

	.-yahoo > .pochipp-box__btn {
		background: var(--pchpp-color-yahoo);
	}

	.-mercari > .pochipp-box__btn {
		background: var(--pchpp-color-mercari);
	}

	.-custom > .pochipp-box__btn {
		background: var(--pchpp-color-custom);
	}

	.-custom_2 > .pochipp-box__btn {
		background: var(--pchpp-color-custom-2);
	}
}

.pochipp-box[data-btn-style="outline"] {

	.pochipp-box__btn {
		background: none !important;
		box-shadow: inset 0 0 0 1px currentColor, 0 1px 4px -1px rgba(0, 0, 0, 0.2);
	}

	.-amazon > .pochipp-box__btn {
		color: var(--pchpp-color-amazon);
	}

	.-rakuten > .pochipp-box__btn {
		color: var(--pchpp-color-rakuten);
	}

	.-yahoo > .pochipp-box__btn {
		color: var(--pchpp-color-yahoo);
	}

	.-custom > .pochipp-box__btn {
		color: var(--pchpp-color-custom);
	}

	.-custom_2 > .pochipp-box__btn {
		color: var(--pchpp-color-custom-2);
	}
}

// box-style
// --------------------------------------------------------
.pochipp-box[data-img="r"] {
	grid-template-areas:
		"areaBody areaImg"
		"areaBtns areaBtns";
	grid-template-columns: 1fr 100px;

	@include mixin.mobile {
		grid-template-columns: 1fr 25%;
	}
}

@include mixin.pc {

	.pochipp-box[data-lyt-pc="dflt"] {

		grid-template-areas:
			"areaImg areaBody"
			"areaImg areaBtns";

		&[data-img="r"] {
			grid-template-areas:
				"areaBody areaImg"
				"areaBtns areaImg";
		}
	}

	.pochipp-box[data-lyt-pc="big"] {
		grid-template-columns: 120px 1fr;

		&[data-img="r"] {
			grid-template-columns: 1fr 120px;
		}

		.pochipp-box__btns {
			margin-top: 20px;
		}
	}

	.pochipp-box[data-lyt-pc="imgbig"] {
		grid-template-areas:
			"areaImg areaBody"
			"areaImg areaBtns";

		grid-template-columns: 140px 1fr;
	}
}

@include mixin.mobile {

	// スマホ縦並び
	.pochipp-box[data-lyt-mb="vrtcl"] {
		display: block;
		font-size: 14px;

		.pochipp-box__image {
			width: 100%;
			margin-bottom: 16px;

			img {
				width: 60%;
				max-width: 120px;
				margin: 0 auto;
			}
		}

		.pochipp-box__body {
			width: 100%;
			padding: 0;
		}

	}
}


// .pochipp-box[data-btn-style="dflt"] {

// 	.pochipp-box__btn {
// 		position: relative;
// 		overflow: hidden;
// 		color: #fff !important;
// 		background-color: #3c3c3c;

// 		&::before {
// 			position: absolute;
// 			right: 12px;
// 			bottom: -10px;
// 			display: block;
// 			width: 12px;
// 			height: 34px;
// 			background: #fff;
// 			transform: rotate(55deg);
// 			transform-origin: 100% 100%;
// 			opacity: 1;
// 			content: "";
// 		}

// 		&::after {
// 			position: absolute;
// 			top: -10px;
// 			left: 12px;
// 			display: block;
// 			width: 12px;
// 			height: 34px;
// 			background: #fff;
// 			transform: rotate(55deg);
// 			transform-origin: 0 0;
// 			opacity: 1;
// 			content: "";
// 		}
// 	}

// 	.-amazon > .pochipp-box__btn {
// 		background: var(--pchpp-color-amazon);
// 	}

// 	.-rakuten > .pochipp-box__btn {
// 		background: var(--pchpp-color-rakuten);
// 	}

// 	.-yahoo > .pochipp-box__btn {
// 		background: var(--pchpp-color-yahoo);
// 	}

// 	.-custom > .pochipp-box__btn {
// 		background: var(--pchpp-color-custom);
// 	}

// }