/* SaleBlocks フロント表示。色はインライン style で当てるため、ここでは形だけを決める。 */

.saleblocks-bar {
	position: relative;
	padding: 10px 16px;
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.saleblocks-bar--sticky {
	position: sticky;
	top: 0;
	z-index: 9999;
}

/*
 * 画面の下部に固定する場合。囲み側を固定して、中のバーを縦に積む。
 * スマホでは親指の届く位置になるので、クリック率が上がりやすい。
 */
.saleblocks-bars--bottom {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
}

/* 本文の先頭に出す場合。本文との間を少し空ける。 */
.saleblocks-bars--content_top {
	margin-bottom: 1em;
}

.saleblocks-bar__close {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0 12px;
	border: 0;
	background: transparent;
	color: #fff;
	font-size: 18px;
	cursor: pointer;
}

.saleblocks-bar a.saleblocks-link {
	color: inherit;
	text-decoration: underline;
}

.saleblocks-ribbon {
	margin: 6px 0 2px;
	text-align: center;
	font-size: 0.88em;
	font-weight: 700;
}

.saleblocks-ribbon a.saleblocks-link {
	color: inherit;
	text-decoration: underline;
}

/*
 * 複数並べたときの区切り。.saleblocks-bars / .saleblocks-ribbons 自体には余白を持たせない。
 * 1件目は従来の margin のまま、2件目以降だけ詰めて、ボタンとの間隔が変わらないようにする。
 */
.saleblocks-bars > .saleblocks-bar + .saleblocks-bar {
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

.saleblocks-ribbons > .saleblocks-ribbon:not(:first-child) {
	margin-top: 2px;
}

.saleblocks-sub {
	margin-left: 0.5em;
	font-size: 0.85em;
	font-weight: 400;
	opacity: 0.9;
}

.saleblocks-countdown {
	margin-left: 0.5em;
	font-variant-numeric: tabular-nums;
}

/* [hidden] 自体はWP既定に任せる。テーマが display を上書きしても隠れるようにする保険。 */
.saleblocks-bar[hidden],
.saleblocks-ribbon[hidden],
.saleblocks-countdown-wrap[hidden] {
	display: none;
}

/*
 * 文言の出し分け。通常・終了間際・開始前の予告は3つともHTMLにあり、ここで選ぶ。
 * display: inline に戻すのは、マーキーの外側 span（inline-block）の中で崩れないようにするため。
 *
 * 通常文言を隠すのは、差し替える文言が実際にあるとき（--has-*-label が付いているとき）だけ。
 * 入れ替え先が無いまま通常文言を隠すと、バーが空になってしまう。
 * 文言を空にして色だけ変える使い方（間際の色替えだけ、など）はそのまま効く。
 */
.saleblocks-text--urgent,
.saleblocks-text--teaser {
	display: none;
}

.saleblocks--urgent.saleblocks--has-urgent-label .saleblocks-text--normal {
	display: none;
}

.saleblocks--urgent .saleblocks-text--urgent {
	display: inline;
}

/*
 * 開始前の予告。終了間際の指定より後に書いて、万一両方が付いても予告が勝つようにする
 * （開始前に「本日まで」と出るほうが、読者を誤らせるため）。
 * 予告文言が空のキャンペーンでは通常の文言のまま先に出る。
 */
.saleblocks--teaser.saleblocks--has-teaser-label .saleblocks-text--normal {
	display: none;
}

.saleblocks--teaser .saleblocks-text--teaser {
	display: inline;
}

.saleblocks--teaser .saleblocks-text--urgent {
	display: none;
}

/* まだ始まっていないので、開催中より一段だけ控えめに見せる。 */
.saleblocks-bar.saleblocks--teaser {
	opacity: 0.92;
}

/* 強調中が目に入るように、バーだけ下に薄い影を足す（派手にしない）。 */
.saleblocks-bar.saleblocks--urgent {
	box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}

/* 文言を右から左へ流す。 */
.saleblocks-bar--marquee,
.saleblocks-ribbon--marquee {
	overflow: hidden;
	white-space: nowrap;
}

.saleblocks-bar--marquee .saleblocks-bar__text,
.saleblocks-ribbon--marquee .saleblocks-ribbon__text {
	display: inline-block;
	padding-left: 100%;
	animation: saleblocks-marquee var(--saleblocks-marquee-duration, 12s) linear infinite;
}

@keyframes saleblocks-marquee {
	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-100%);
	}
}

/* 動きを減らす設定の人には流さない。 */
@media (prefers-reduced-motion: reduce) {
	.saleblocks-bar--marquee .saleblocks-bar__text,
	.saleblocks-ribbon--marquee .saleblocks-ribbon__text {
		padding-left: 0;
		animation: none;
	}
}

@media (max-width: 600px) {
	.saleblocks-bar {
		padding: 8px 32px 8px 12px;
		font-size: 13px;
	}
}