@import (reference) '../../../styles/variables';

.jodit-filebrowser-preview {
	position: relative;
	display: flex;

	min-width: 400px;
	max-width: Min(100%, 1000px);
	height: 100%;
	min-height: Min(100%, 500px);
	max-height: 100%;

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

	margin: auto;
	text-align: center;

	@media (max-width: @screen-sm) {
		min-width: auto;
		max-width: 100%;
		height: 100%;
		min-height: auto;
		max-height: 100%;
	}

	&__box {
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
	}

	&__navigation {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		cursor: pointer;

		&_arrow_next {
			right: 0;
			left: auto;
		}

		svg {
			position: relative;
			top: 50%;
			width: 45px;
			height: 45px;
			fill: #9e9ba7;
			transform: translateY(-50%);
			transition: fill 0.3s linear;
		}

		&:hover svg {
			fill: #000;
		}
	}

	img {
		max-width: 100%;
		max-height: 100%;
	}
}