/*!
 * AS BANNER フロントスタイル
 *
 * テーマの影響を受けないよう、次の2段構えで組んでいます。
 * 1. スコープ内リセット（all: revert）でテーマの指定をブラウザ既定へ戻す
 * 2. クラスを重ねて詳細度を上げた自前のルールで描画する
 * 見本画像の寸法だけは、テーマが !important を使っていても勝てるよう
 * PHP 側がインラインスタイルで出力します。
 */

/* ------------------------------------------------------------------
 * 1. スコープ内リセット
 * ------------------------------------------------------------------ */
.as-banner.as-banner,
.as-banner.as-banner *,
.as-banner.as-banner *::before,
.as-banner.as-banner *::after {
	all: revert;
	box-sizing: border-box;
}

/* ------------------------------------------------------------------
 * 2. 自前のスタイル
 * ------------------------------------------------------------------ */
.as-banner.as-banner {
	--as-banner-border: #ccd0d4;
	--as-banner-bg: #fff;
	--as-banner-text: #1d2327;
	--as-banner-muted: #50575e;
	--as-banner-accent: #2271b1;
	--as-banner-accent-text: #fff;

	display: block;
	max-width: 100%;
	margin: 0 0 1.5em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--as-banner-text);
	font-family: inherit;
	font-size: inherit;
	line-height: 1.6;
	text-align: left;
}

.as-banner.as-banner .as-banner__desc {
	margin: 0 0 .5em;
	padding: 0;
	font-size: .95em;
	color: inherit;
}

.as-banner.as-banner .as-banner__preview {
	display: block;
	margin: 0 0 .5em;
	padding: 0;
	max-width: 100%;
}

.as-banner.as-banner .as-banner__link {
	display: inline-block;
	max-width: 100%;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	text-decoration: none;
}

/*
 * テーマの `img { width:100% }` を打ち消すため width も明示する。
 * 実際の寸法は PHP が出力するインラインスタイルで確定する。
 */
.as-banner.as-banner .as-banner__preview img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	vertical-align: bottom;
}

.as-banner.as-banner .as-banner__size {
	margin: 0 0 .5em;
	padding: 0;
	font-size: .9em;
	color: var(--as-banner-muted);
}

.as-banner.as-banner .as-banner__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0 0 -1px;
	padding: 0;
	border: 0;
	list-style: none;
}

.as-banner.as-banner .as-banner__tab {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: .35em .9em;
	border: 1px solid var(--as-banner-border);
	border-bottom-color: transparent;
	border-radius: 4px 4px 0 0;
	background: #f6f7f7;
	background-image: none;
	color: var(--as-banner-muted);
	font-family: inherit;
	font-size: .85em;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-transform: none;
	letter-spacing: normal;
	text-decoration: none;
	box-shadow: none;
	appearance: none;
	cursor: pointer;
}

.as-banner.as-banner .as-banner__tab.is-active {
	background: var(--as-banner-bg);
	color: var(--as-banner-text);
	font-weight: 700;
}

.as-banner.as-banner .as-banner__codes {
	display: block;
	margin: 0 0 .6em;
	padding: 0;
}

.as-banner.as-banner .as-banner__panel {
	display: block;
	margin: 0;
	padding: 0;
}

.as-banner.as-banner .as-banner__panel[hidden] {
	display: none;
}

.as-banner.as-banner .as-banner__code {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: .6em;
	border: 1px solid var(--as-banner-border);
	border-radius: 4px;
	background: var(--as-banner-bg);
	background-image: none;
	color: var(--as-banner-text);
	font-family: Consolas, Menlo, Monaco, "Courier New", monospace;
	font-size: .85em;
	line-height: 1.5;
	box-shadow: none;
	appearance: none;
	resize: vertical;
	overflow: auto;
	white-space: pre;
}

.as-banner.as-banner .as-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0;
	padding: 0;
}

.as-banner.as-banner .as-banner__button {
	display: inline-block;
	width: auto;
	min-width: 0;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: .5em 1.2em;
	border: 1px solid var(--as-banner-accent);
	border-radius: 4px;
	background: var(--as-banner-accent);
	background-image: none;
	color: var(--as-banner-accent-text);
	font-family: inherit;
	font-size: .9em;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
	text-decoration: none;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	appearance: none;
	cursor: pointer;
}

.as-banner.as-banner .as-banner__button:hover,
.as-banner.as-banner .as-banner__button:focus {
	filter: brightness(1.1);
	color: var(--as-banner-accent-text);
	text-decoration: none;
}

.as-banner.as-banner .as-banner__download {
	background: var(--as-banner-bg);
	color: var(--as-banner-accent);
}

.as-banner.as-banner .as-banner__download:hover,
.as-banner.as-banner .as-banner__download:focus {
	color: var(--as-banner-accent);
}

.as-banner.as-banner .as-banner__copy.is-copied {
	border-color: #007017;
	background: #007017;
	color: #fff;
}

.as-banner.as-banner .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.as-banner__error {
	padding: .6em .9em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #8a1f21;
	font-size: .9em;
}

/* ------------------------------------------------------------------
 * 3. ダークモード（テーマ側の配色に合わせたい場合は load_css をオフに）
 * ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	.as-banner.as-banner {
		--as-banner-border: #4a4f55;
		--as-banner-bg: #1e2125;
		--as-banner-text: #e6e6e6;
		--as-banner-muted: #b3b8bd;
		--as-banner-accent: #4f94d4;
	}

	.as-banner.as-banner .as-banner__tab {
		background: #2a2e33;
	}
}