@import '~swiper/css';

.block-carousel {
	width: 100%;

	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 'images images' 'pagination pagination' 'prev next';
	overflow-x: hidden;

	gap: 0.5rem;

	// Pagination.
	&__pagination {
		grid-area: pagination;
		justify-self: center;

		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.25rem;

		width: max-content !important; // stylelint-disable-line declaration-no-important

		padding: 0 0 0.5rem;

		border-radius: 10rem;

		z-index: 1;

		.swiper-pagination-bullet {
			width: 0.5rem;
			height: 0.5rem;
			border: 1px solid currentColor;
			border-radius: 10rem;

			&:not(.swiper-pagination-bullet-active) {
				cursor: pointer;
			}

			transition: {
				property: background-color;
				timing-function: ease-out;
				duration: 0.3s;
			}
		}

		.swiper-pagination-bullet-active {
			background-color: currentColor;
		}
	}

	// Navigation buttons.
	&__button {
		@extend %button-reset;

		display: flex;
		align-items: center;
		justify-content: center;

		margin: 0;
		padding: 0;

		width: 3rem;
		height: 3rem;

		background: none;

		border: 1px solid currentColor;
		border-radius: 10rem;

		cursor: pointer;

		transition: {
			property: opacity;
			timing-function: linear;
			duration: 0.3s;
		}

		&:disabled {
			opacity: 0.4;
			pointer-events: none;
		}

		&--previous {
			grid-area: prev;
			justify-self: flex-end;
		}

		&--next {
			grid-area: next;
			justify-self: flex-start;
		}
	}

	> .swiper-wrapper {
		grid-area: images;
	}
}