@use "@wordpress/base-styles/breakpoints" as *;
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
@use "../utils/theme-variables" as *;

.components-guide {
	$image-height: 300px;
	// TODO: Replace with a --wpds-dimension-surface-width-* token.
	$image-width: 320px;

	@include break-small() {
		// TODO: Replace with a --wpds-dimension-surface-width-* token.
		width: 600px;
	}

	.components-modal__content {
		padding: 0;
		margin-top: 0;

		&::before {
			content: none;
		}
	}

	.components-modal__header {
		border-bottom: none;
		padding: 0;
		position: sticky;
		height: $header-height;

		.components-button {
			align-self: flex-start;
			margin: $grid-unit-10 $grid-unit-10 0 0;
			position: static;
		}
	}

	.components-guide__container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-top: -$header-height;
		min-height: 100%;
	}

	.components-guide__page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;

		@include break-small() {
			min-height: $image-height;
		}
	}

	.components-guide__footer {
		align-content: center;
		display: flex;
		height: $button-size;
		justify-content: center;
		margin: 0 0 $grid-unit-30 0;
		padding: 0 $grid-unit-30;
		position: relative;
		width: 100%;
	}

	.components-guide__page-control {
		margin: 0;
		text-align: center;

		li {
			display: inline-block;
			margin: 0;
		}

		.components-button {
			margin: -6px 0;
			color: $gray-200;
		}

		li[aria-current="step"] .components-button {
			color: $components-color-accent;
		}
	}
}

.components-modal__frame.components-guide {
	border: none;
	// TODO: Replace with a --wpds-dimension-surface-width-* token.
	min-width: 312px;
	max-height: 575px;

	@media ( max-width: $break-small ) {
		margin: auto;
		max-width: calc(100vw - #{$grid-unit-20} * 2);
	}
}

.components-button {
	&.components-guide__back-button,
	&.components-guide__forward-button,
	&.components-guide__finish-button {
		position: absolute;
	}

	&.components-guide__back-button {
		left: $grid-unit-30;
	}

	&.components-guide__forward-button,
	&.components-guide__finish-button {
		right: $grid-unit-30;
	}
}