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

.jodit-ui-preview {
	position: relative;
	display: flex;
	width: 200px;
	min-width: 200px;
	height: 100%;
	min-height: 200px;

	flex-direction: column;
	flex-shrink: 0;
	align-items: center;
	justify-content: flex-start;

	border-left: 1px solid var(--sidebar-border-color);
	background-color: var(--sidebar-bg);

	&_hidden_true {
		display: none;
	}

	&__image {
		position: relative;
		width: 100%;
		height: calc(100% - 100px);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	&__info {
		width: 100%;
		max-width: 100%;
		padding: var(--padding-default);
	}

	&__filesize,
	&__name,
	&__time {
		overflow: hidden;
		font-size: 0.75em;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	&__loader {
		position: absolute;
		top: 50%;
		left: 50%;
		&:extend(.jodit-ui-browser-loader);

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

	&__empty-message {
		position: absolute;
		top: 50%;
		left: 50%;
		display: none;
		color: var(--sidebar-color);
		transform: translateX(-50%) translateY(-50%);
	}

	&_loading_true &__loader {
		opacity: 1;
	}

	&_empty_true&_loading_true &__loader {
		display: block;
	}

	&_empty_true&_loading_false &__empty-message {
		display: block;
	}

	&_empty_true &__image {
		display: none;
	}
}