/**
 * YK Slideout — foundation styles
 *
 * Structural only. No colour, typography, or content opinions.
 * Visual styling belongs to the consuming component.
 */

/* Body scroll lock */
body.yk-slideout-lock {
	overflow: hidden;
}

/* Overlay */
.yk-slideout-overlay {
	position: fixed;
	inset: 0;
	z-index: 9998;
	background-color: rgba(0, 0, 0, 0.5);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.yk-slideout-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* Panel */
.yk-slideout {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	width: min(400px, 100vw);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.yk-slideout.is-open {
	transform: translateX(0);
}

/* Scrollable content area */
.yk-slideout__inner {
	flex: 1;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* Close button slot — layout only, no visual styling */
.yk-slideout__close {
	display: flex;
	align-items: center;
	cursor: pointer;
	background: none;
	border: none;
	padding: 0;
}

/* Accessible focus outline for focus-trapped elements */
.yk-slideout :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}