@import (reference) '~jodit/src/styles/mixins';
@import (reference) '../loader/loader';

.jodit-ui-light-box {
	position: relative;
	display: flex;
	min-width: 300px;
	height: 100%;
	min-height: 300px;

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

	&__previous,
	&__next {
		.size(32px);
		position: absolute;
		top: 50%;
		fill: var(--color-label);
		transition: transform 0.1s ease-in;

		&:active {
			transform: scale(1.2, 1.2);
		}
	}

	&__previous {
		left: 32px;
	}

	&__next {
		right: 32px;
	}

	&__preview {
		max-height: 100%;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	&__loader {
		position: absolute;
		top: 50%;
		left: 50%;

		&:extend(.jodit-ui-browser-loader);

		opacity: 0;
		transition: opacity 0.3s linear;
	}

	&_loading_true &__loader {
		opacity: 1;
	}

	&__office-iframe {
		min-width: 90vw;
		min-height: 90vh;
		border: 0;
	}
}