@import "@wordpress/base-styles/breakpoints";

.readymade-templates {
	display: flex;
	gap: 24px;
	overflow: auto;
	scroll-snap-type: x proximity;
	scroll-padding-left: 24px;
	padding-left: calc((100vw - 1440px) / 2 + 102px);
	padding-right: 24px;

	@media (max-width: $break-wide) {
		padding-left: 24px;
		padding-right: 24px;
	}

	@media (max-width: $break-medium) {
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Hide scrollbar */
	scrollbar-width: none; // Chrome, Edge, Firefox
	&::-webkit-scrollbar {
		display: none; // Safari
	}
}

a.readymade-template {
	color: var(--studio-white);
}

.readymade-template__preview {
	--readymade-template-width: 390px;
	width: var(--readymade-template-width);
	height: calc(var(--readymade-template-width) * 1.4);
	background-color: #fff;
	margin-bottom: 24px;
	overflow: hidden;
	border-radius: 2px;
	pointer-events: none;

	@media (max-width: $break-huge) {
		--readymade-template-width: calc(100vw / 3 - 90px);
	}

	@media (max-width: $break-wide) {
		--readymade-template-width: calc(100vw / 3 - 50px);
	}

	@media (max-width: $break-medium) {
		--readymade-template-width: calc(100vw / 2 - 72px);
	}

	@media (max-width: $break-small) {
		--readymade-template-width: calc(100vw - 170px);
	}
}

.readymade-template__title {
	font-size: 1.125rem; /* stylelint-disable-line scales/font-sizes */
	line-height: 26px;
}

.readymade-templates-controls {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 16px;

	button {
		width: 48px;
		height: 48px;
		background: var(--studio-gray-70);
		fill: var(--studio-white);
		border: none;
		align-items: center;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		cursor: pointer;
		transition: background 0.3s ease-in-out;

		&:hover {
			background: var(--studio-gray-50);
		}

		&:disabled {
			pointer-events: none;
			background: var(--studio-gray-80);
		}
	}
}
