@import 'mixins/_breakpoints.scss';
@import 'elements/button';

.cp-pg-template {
	max-width: 90vw;
	width: var( --cp-content-width );
	margin: var(--cp-gap--md) auto;
	padding-bottom: var(--cp-gap--lg);
	flex-grow: 1;
	box-sizing: border-box;

	* {
		box-sizing: border-box;
	}

	@include media-breakpoint-down(md) {
		max-width: calc(100vw - var(--cp-content-padding));
    width: 100%;
	}

	.cp-pagination {
		ul {
			display: flex;
			justify-content: center;

			li > div:hover {
				background: transparent;
			}
		}

		button, div {
			color: var(--cpl--text-color);
		}

	}

	.pagination {
		margin-top: var(--cp-gap--md);
	}

	.pagination, .nav-links {
		display: flex;
		justify-content: center;
		gap: var(--cp-gap--md);
		align-items: center;

		.prev, .next {
			@extend %cp-button;
			@extend %cp-button--outline;
			@extend %cp-button--is-small;
		}
	}
}

.cp-icon {
	svg {
		display: block;
		fill: currentColor;
		width: 100%;
		height: 100%;
	}
}

.material-icons-outlined {
	font-family: 'Material Icons Outlined' !important;
}