@import (reference) '../../../../styles/variables';
@import (reference) '../../../../styles/mixins';
@import (reference) '../../styles/file-browser';

.jodit-filebrowser-files {
	position: relative;
	display: none;
	height: 100%;
	vertical-align: top;

	.jodit-button {
		border-radius: 0;
	}

	&_loading_true {
		.file-browser-loader();
	}

	&_active_true {
		display: flex;
	}

	.scrollbarSlim();

	&_active_true {
		width: 100%;
		flex-wrap: wrap;
		align-content: flex-start;
		padding: calc(var(--padding-default) / 2);
		overflow-y: auto;
	}

	&__item {
		position: relative;

		display: flex;
		overflow: hidden;
		width: var(--col_size);
		height: var(--col_size);

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

		border: 1px solid var(--color-border);
		margin: calc(var(--padding-default) / 2);
		font-size: 0;

		@media (max-width: @screen-xs) {
			width: calc(50% - var(--padding-default));
		}

		text-align: center;
		transition: border 0.1s linear, bottom 0.1s linear;

		img {
			max-width: 100%;
		}

		&:hover {
			border-color: #433b5c;
		}

		&_active_true {
			border-color: var(--color-border-selected);
			background-color: var(--color-border-active);

			.jodit-filebrowser-files__item-info {
				background-color: var(--color-border-active);
				color: white;
				text-shadow: none;
			}
		}

		&-info {
			position: absolute;
			right: 0;
			bottom: 0;
			left: 0;
			overflow: visible;
			padding: 0.3em 0.6em;
			background-color: var(--info-background);
			color: rgb(51, 51, 51);
			font-size: 14px;
			line-height: 16px;
			opacity: 0.85;
			text-align: left;
			text-shadow: rgb(238, 238, 238) 0 1px 0;
			transition: opacity 400ms ease;
			white-space: normal;

			> span {
				display: block;
				overflow: hidden;
				font-size: 0.75em;
				text-overflow: ellipsis;
				white-space: nowrap;

				&.jodit-filebrowser-files__item-info-filename {
					font-size: 0.9em;
					font-weight: bold;
				}
			}
		}

		&:hover:not(&_active_true) &-info {
			bottom: -100px;
		}
	}

	&_view_list {
		scroll-behavior: smooth;

		a {
			display: block;
			width: 100%;
			height: 26px;
			border-width: 0 0 1px 0;
			margin: 0;
			line-height: 26px;
			text-align: left;
			white-space: nowrap;

			img {
				display: inline-block;
				min-width: 16px;
				max-width: 16px;
				margin-left: 4px;
				vertical-align: middle;
			}

			.jodit-filebrowser-files__item-info {
				position: static;
				display: inline-block;
				width: ~'calc(100% - 20px)';
				height: 100%;
				padding: 0;
				margin-left: 4px;
				background-color: transparent;
				font-size: 0;
				line-height: inherit;
				vertical-align: middle;

				> span {
					display: inline-block;
					height: 100%;
					font-size: 12px;
				}

				&-filename {
					width: 50%;
				}

				&-filesize {
					width: 25%;
				}

				&-filechanged {
					width: 25%;
				}
			}

			&:hover {
				background-color: #433b5c;

				.jodit-filebrowser-files__item-info {
					color: #fff;
					text-shadow: none;
				}
			}

			&::before {
				display: inline-block;
				height: 100%;
				content: '';
				vertical-align: middle;
			}
		}
	}
}