// import mixins and variables
@import '../../common/assets/common.scss';

.bpf-content {

	&--format-gallery {
		position: relative;
	}

	&__gallery {

		&-image {
			opacity: 0;
			transition: $frontend-opacity-transition;

			@include bpfDisplayBlock();

			&:not(:first-child) {
				left: 0;
				object-fit: cover;
				top: 0;

				@include bpfPositionAbsolute(100%, 100%);
			}

			&.active {
				opacity: 1;
			}
		}

		&-navigation {
		}

		&-prev,
		&-next {
			cursor: pointer;
			font-size: $frontend-arrow-size;
			text-align: center;
			top: 50%;
			transform: translateY(-50%);
			transition: $frontend-color-transition;

			@include bpfPositionAbsolute($frontend-arrow-size, $frontend-arrow-size);

			&:hover {
				color: $frontend-color--medium;
			}
		}

		&-prev {
			left: 0;

			&:after {
				@include bpfIcon('\f341', $frontend-arrow-size);
			}
		}

		&-next {
			right: 0;

			&:after {
				@include bpfIcon('\f345', $frontend-arrow-size);
			}
		}

		&-pagination {
			bottom: 20px;
			display: flex;
			justify-content: center;
			list-style: none;
			margin: 0;
			padding: 0;

			@include bpfPositionAbsolute(auto, 100%);

			li {
				background-color: currentColor;
				cursor: pointer;
				height: 5px;
				margin: 0 5px;
				padding: 0;
				transition: $frontend-background-color-transition;

				@include bpfDisplayBlock(40px);

				&:hover,
				&.active {
					background-color: $frontend-color--medium;
				}
			}
		}
	}
}