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

.jodit-ui-virtual-scroll {
	position: relative;

	display: flex;
	overflow: auto;
	height: 100%;

	flex: 1 100%;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: flex-start;

	padding-bottom: var(--padding-default);

	background-color: var(--files-bg);

	.scrollbarSlim();

	&_view_list {
		flex-direction: column;
		flex-wrap: nowrap;
	}

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

	& &__loader {
		position: absolute;
		top: 50%;
		left: 50%;
		display: none;
		&:extend(.jodit-ui-browser-loader);
		color: var(--sidebar-color);
	}

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

	&_chunk-loading_true {
		border-bottom: 1px solid var(--color-background-active);
	}

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

	&__drag-area {
		position: absolute;
		z-index: 2;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		display: none;

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

		border: 5px dashed var(--color-border);
		background-color: var(--files-bg);
		color: var(--fb-color);
		pointer-events: none;
	}

	&_dragover_true &__drag-area {
		display: flex;
	}
}