@import "@wordpress/base-styles/variables";
@import "@wordpress/base-styles/mixins";

.guide-modal__wrapper {
	width: 400px;
	align-self: start;

	.components-modal__content {
		margin: 0;
		padding: 0;
	}
	.guide-modal__header::after {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 30%;
		display: inline-block;
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
		opacity: 0;
		transition: opacity 0.3s ease-out;
	}

	&:hover .guide-modal__header::after {
		opacity: 1;
	}
}

.guide-modal__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 500px;
}

.guide-modal__header {
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
	height: 240px;

	// FIXME: remove this after proper video aspect ratio added
	video {
		margin-block-start: -20px;
	}

	img,
	video {
		z-index: -1;
	}
}

.guide-modal__dismiss-button {
	position: absolute;
	top: 16px;
	right: 16px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	box-sizing: border-box;
	z-index: 10;

	.gridicon {
		fill: var(--color-text-inverted);
	}

	&:focus-visible {
		outline: 1px solid var(--color-text-inverted);
	}
}

.guide-modal__main {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 0 auto;
}

.guide-modal__body {
	display: flex;
	flex-direction: column;

	.guide-modal__pagination-dots {
		display: flex;
		gap: 9px;
		align-self: center;
		margin-bottom: 1rem;
	}

	.guide-modal__pagination-dot {
		height: 7px;
		width: 7px;
		background-color: var(--color-neutral-20);
		border-radius: 50%;
		display: inline-block;

		&.active {
			background-color: var(--color-primary-50);
		}
	}

	h3 {
		@include heading-large;
		color: var(--color-neutral-100);
	}

	p {
		@include body-medium;
		color: var(--color-neutral-80);
	}
}

.guide-modal__footer {
	display: flex;
	gap: 1rem;
	align-self: flex-end;
}
