/**
 * css/components/slider.css
 * ============================================================
 * A LEGEND 2：Slider
 * ============================================================
 *
 * 役割：
 * - SplideなどのスライダーUIに共通のA LEGEND 2装飾を与えます。
 * - assets/vendor/splide/splide.min.css の上書きとして読み込まれる想定です。
 */

.aleg2-slider {
	position: relative;
}

.aleg2-slider .splide__track {
	overflow: visible;
}

.aleg2-slider .splide__slide {
	height: auto;
}

.aleg2-slider .splide__arrows {
	position: absolute;
	right: 0;
	bottom: calc(100% + var(--aleg2-space-5));
	display: flex;
	gap: var(--aleg2-space-2);
}

.aleg2-slider .splide__arrow {
	position: static;
	width: 44px;
	height: 44px;
	color: var(--aleg2-color-text);
	background: var(--aleg2-color-surface);
	border: 1px solid var(--aleg2-color-border);
	border-radius: var(--aleg2-radius-pill);
	backdrop-filter: var(--aleg2-backdrop-glass);
	opacity: 1;
	transform: none;
	transition:
		color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		border-color var(--aleg2-duration-fast) var(--aleg2-ease-standard),
		background var(--aleg2-duration-fast) var(--aleg2-ease-standard);
}

.aleg2-slider .splide__arrow:hover {
	color: var(--aleg2-color-primary);
	background: rgba(255, 255, 255, 0.1);
	border-color: var(--aleg2-color-primary);
}

.aleg2-slider .splide__arrow svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.aleg2-slider .splide__pagination {
	position: static;
	gap: var(--aleg2-space-2);
	margin-top: var(--aleg2-space-8);
	padding: 0;
}

.aleg2-slider .splide__pagination__page {
	width: 8px;
	height: 8px;
	background: var(--aleg2-color-border-strong);
	border-radius: var(--aleg2-radius-pill);
	opacity: 1;
	transition:
		width var(--aleg2-duration-normal) var(--aleg2-ease-standard),
		background var(--aleg2-duration-normal) var(--aleg2-ease-standard);
}

.aleg2-slider .splide__pagination__page.is-active {
	width: 28px;
	background: var(--aleg2-color-primary);
	transform: none;
}

@media (max-width: 640px) {
	.aleg2-slider .splide__arrows {
		position: static;
		justify-content: flex-end;
		margin-top: var(--aleg2-space-5);
	}
}