// Shared file browser rules for token-based themes.
//
// `.jui-finder()` styles the free Jodit file browser and the Jodit PRO
// finder from the `--ui-*` custom properties a theme sets in the same block.
// It is a mixin (no CSS of its own), see themes/<name>/<name>.finder.less.

.jui-finder() {
	// Free Jodit file browser
	.jodit-file-browser-tree {
		--jd-color-background-filebrowser-folders: var(--ui-pane-bg);
		--jd-color-folder-title: var(--ui-pane-text);

		padding-top: 4px;
		border-right: 1px solid var(--ui-pane-border);
		background: var(--ui-pane-bg);

		&::-webkit-scrollbar-track {
			box-shadow: none;
		}

		&::-webkit-scrollbar-thumb {
			background-color: var(--ui-scrollbar);
			outline: 0;
		}

		&__item {
			min-height: 26px;
			padding: 2px 8px;
			border: 1px solid transparent;
			margin: 1px 6px;
			border-radius: var(--ui-item-radius);
			color: var(--ui-pane-text);

			&-title {
				display: flex;
				align-items: center;
				color: var(--ui-pane-text);

				&::before {
					width: 16px;
					height: 14px;
					flex: none;
					margin-right: 8px;
					background: var(--ui-folder-icon) no-repeat center / contain;
					content: '';
				}
			}

			&:hover {
				border-color: var(--ui-item-hover-border);
				background: var(--ui-item-hover-bg);
			}

			&:hover .jodit-file-browser-tree__item-title {
				color: var(--ui-pane-text);
			}

			.jodit-ui-button svg {
				fill: var(--ui-muted);
				stroke: var(--ui-muted);
			}
		}

		&__source-title {
			padding: 6px 12px;
			border-bottom: 1px solid var(--ui-pane-border);
			background: var(--ui-source-bg);
			color: var(--ui-source-text);
			font-weight: 600;
		}

		&__plus {
			margin: 6px;
		}
	}

	.jodit-file-browser-files {
		background: var(--ui-files-bg);

		&::-webkit-scrollbar-thumb {
			background-color: var(--ui-scrollbar);
		}

		&__item {
			border-color: transparent;
			border-radius: var(--ui-item-radius);
			text-decoration: none;

			&:hover {
				border-color: var(--ui-item-hover-border);
				background: var(--ui-item-hover-bg);
			}

			&_active_true,
			&_active_true:hover {
				border-color: var(--ui-item-selected-border);
				background: var(--ui-item-selected-bg);

				.jodit-file-browser-files__item-info,
				.jodit-file-browser-files__item-info > span {
					background-color: transparent;
					color: var(--ui-item-selected-text);
				}
			}
		}

		// Tiles: picture with a caption underneath, no overlay
		&_view_tiles .jodit-file-browser-files__item {
			height: auto;
			min-height: var(--jd-col-size);
			flex-direction: column;
			justify-content: flex-start;
			padding: 6px 6px 4px;

			img {
				max-height: calc(var(--jd-col-size) - 56px);
				box-sizing: border-box;
				border: var(--ui-thumb-border);
				margin: auto 0;
				border-radius: var(--ui-thumb-radius);
				box-shadow: var(--ui-thumb-shadow);
			}

			.jodit-file-browser-files__item-info {
				position: static;
				width: 100%;
				padding: 4px 0 0;
				background: transparent;
				color: var(--ui-text);
				opacity: 1;
				text-align: center;
				text-shadow: none;

				> span {
					color: var(--ui-muted);
					font-size: 11px;
					line-height: 15px;
				}

				> .jodit-file-browser-files__item-info-filename {
					color: var(--ui-text);
					font-size: 12px;
					font-weight: normal;
				}
			}
		}

		// List: details rows
		&_view_list a {
			border-color: transparent;

			&:hover {
				border-color: var(--ui-item-hover-border);
				background: var(--ui-item-hover-bg);

				.jodit-file-browser-files__item-info {
					color: var(--ui-text);
				}
			}

			.jodit-file-browser-files__item-info > span {
				color: var(--ui-muted);
				font-weight: normal;
			}

			.jodit-file-browser-files__item-info > .jodit-file-browser-files__item-info-filename {
				color: var(--ui-text);
			}
		}
	}

	.jodit-file-browser-preview__navigation {
		svg {
			fill: var(--ui-muted);
		}

		&:hover svg {
			fill: var(--ui-text);
		}
	}

	// Jodit PRO finder
	&.jodit-file-browser-pro {
		font-family: var(--jd-font-default);
	}

	.jodit-file-browser-pro__panel {
		overflow: hidden;
		border: 1px solid var(--ui-dialog-border);
		border-radius: var(--ui-dialog-radius);
		background-color: var(--ui-surface);
		box-shadow: var(--ui-shadow);
		color: var(--ui-text);
	}

	.jodit-file-browser-pro__header {
		min-height: 40px;
		border-bottom-color: var(--ui-toolbar-border);
		background: var(--ui-toolbar-bg);
	}

	.jodit-file-browser-pro__header-title,
	.jodit-file-browser-pro__header-toolbar {
		line-height: 38px;
	}

	.jodit-file-browser-pro__header-toolbar [class*='_close'] .jodit-toolbar-button__button:hover:not([disabled]) {
		background: var(--ui-close-hover-bg);

		svg {
			fill: var(--ui-close-hover-icon);
			stroke: var(--ui-close-hover-icon);
		}
	}

	.jodit-file-browser-pro__resizer svg {
		fill: var(--ui-muted);
	}

	// The finder's own tokens
	.jodit-ui-browser-panel {
		--jd-fb-color: var(--ui-text);
		--jd-files-bg: var(--ui-files-bg);
		--jd-item-bg: transparent;
		--jd-item-bg-hover: var(--ui-item-hover-bg);
		--jd-item-border-color: transparent;
		--jd-item-border-selected-color: var(--ui-item-selected-border);
		--jd-item-border-bg-selected-color: var(--ui-item-selected-bg);
		--jd-item-info-color: var(--ui-text);
		--jd-item-info-bg: transparent;
		--jd-sidebar-bg: var(--ui-pane-bg);
		--jd-sidebar-color: var(--ui-pane-text);
		--jd-sidebar-border-color: var(--ui-pane-border);
		--jd-sidebar-hide-btn-bg: var(--ui-pane-bg);
		--jd-folder-bg: var(--ui-item-hover-bg);
		--jd-folder-border: var(--ui-item-hover-border);
		--jd-source-bg: var(--ui-source-bg);
		--jd-source-border: var(--ui-pane-border);
		--jd-message-bg: var(--ui-surface);
		--jd-message-color: var(--ui-text);
		--jd-message-shadow-color: var(--ui-line);
	}

	.jodit-ui-sidebar__box,
	.jodit-ui-virtual-scroll {
		&::-webkit-scrollbar-track {
			box-shadow: none;
		}

		&::-webkit-scrollbar-thumb {
			background-color: var(--ui-scrollbar);
			outline: 0;
		}
	}

	// Navigation pane
	.jodit-ui-sidebar {
		background: var(--ui-pane-bg);
	}

	.jodit-ui-sidebar__hide-btn svg {
		fill: var(--ui-muted);
	}

	.jodit-ui-browser-source__name {
		height: auto;
		padding: 8px 12px;
		background: var(--ui-source-bg);
		color: var(--ui-source-text);
		font-weight: 600;
	}

	.jodit-ui-browser-folder {
		padding: 3px 8px;
		border: 1px solid transparent;
		margin: 1px 6px;
		border-radius: var(--ui-item-radius);
		color: var(--ui-pane-text);

		&:hover {
			border-color: var(--ui-item-hover-border);
			background: var(--ui-item-hover-bg);
		}

		&_active_true,
		&_active_true:hover {
			border-color: var(--ui-item-selected-border);
			background: var(--ui-item-selected-bg);
			color: var(--ui-item-selected-text);
		}

		&__icon-wrapper {
			background: var(--ui-folder-icon) no-repeat center / contain;

			svg {
				display: none;
			}
		}

		&__arrow svg {
			fill: var(--ui-muted);
		}
	}

	// Files
	.jodit-ui-browser-item {
		border: 1px solid transparent;
		border-radius: var(--ui-item-radius);

		&:hover {
			border-color: var(--ui-item-hover-border);
			background: var(--ui-item-hover-bg);
		}

		&_active_true,
		&_active_true:hover {
			border-color: var(--ui-item-selected-border);
			background: var(--ui-item-selected-bg);
			outline: 0;

			.jodit-ui-browser-item__name,
			.jodit-ui-browser-item__time,
			.jodit-ui-browser-item__filesize {
				color: var(--ui-item-selected-text);
			}
		}

		&__name {
			color: var(--ui-text);
			font-weight: normal;
		}

		&__heart svg {
			fill: var(--ui-muted);
		}
	}

	// Large tiles: picture with a caption underneath instead of an overlay
	.jodit-ui-browser-item_view_tiles:not(
			.jodit-ui-browser-item_size_small,
			.jodit-ui-browser-item_size_xsmall
		) {
		display: flex;
		height: auto;
		flex-direction: column;
		padding: 6px 6px 4px;

		.jodit-ui-browser-item__image {
			width: 100%;
			height: calc(var(--jd-item-size) - 40px);
			border-radius: var(--ui-thumb-radius);
		}

		// Outweighs the PRO rule that hides the caption on hover
		.jodit-ui-browser-item__info,
		&.jodit-ui-browser-item.jodit-ui-browser-item_view_tiles:hover
			.jodit-ui-browser-item__info {
			position: static;
			padding: 4px 0 0;
			background: transparent;
			opacity: 1;
			text-align: center;
		}

		.jodit-ui-browser-item__name {
			font-size: 12px;
		}

		.jodit-ui-browser-item__time,
		.jodit-ui-browser-item__filesize {
			color: var(--ui-muted);
			font-size: 11px;
		}
	}

	// Settings panel (gear button): the theme switch is hidden because it
	// would replace this theme with Jodit's light or dark one; the options
	// become segmented controls
	.jodit-ui-browser-settings {
		border-left-color: var(--ui-pane-border);
		background: var(--ui-surface);
		color: var(--ui-text);

		&__theme {
			display: none;
		}

		&__title {
			color: var(--ui-text);
		}

		&__close {
			color: var(--ui-muted);

			svg {
				width: 16px;
				height: 16px;
				fill: none;
				stroke: currentColor;
			}

			&:hover {
				color: var(--ui-text);
			}
		}

		&__options {
			&::-webkit-scrollbar-track {
				box-shadow: none;
			}

			&::-webkit-scrollbar-thumb {
				background-color: var(--ui-scrollbar);
				outline: 0;
			}
		}

		.jodit-ui-button-group__label {
			color: var(--ui-muted);
		}

		.jodit-ui-button-group__options {
			display: inline-flex;
			overflow: hidden;
			border: 1px solid var(--ui-push-border);
			border-radius: var(--ui-push-radius);
			box-shadow: var(--ui-push-shadow);
		}

		.jodit-ui-button-group .jodit-ui-button {
			border: 0;
			border-radius: 0;
			background: var(--ui-push-bg);
			box-shadow: none;
			color: var(--ui-push-text);
			outline: 0;

			svg {
				fill: var(--ui-push-text);
			}

			.jodit-ui-button__text {
				color: var(--ui-push-text);
			}

			& + .jodit-ui-button,
			&[aria-pressed='true']:not([disabled]) + .jodit-ui-button {
				border-left: 1px solid var(--ui-push-border);
			}

			&:hover:not([disabled]) {
				background: var(--ui-push-hover-bg);
			}

			&[aria-pressed='true']:not([disabled]) {
				background: var(--ui-pressed-bg);
				box-shadow: none;

				.jodit-ui-button__text {
					color: var(--ui-pressed-icon);
					font-weight: 600;
				}

				svg {
					fill: var(--ui-pressed-icon);
				}
			}
		}
	}

	// Status bar
	.jodit-ui-browser-status-bar {
		border-top-color: var(--ui-toolbar-border);
		background: var(--ui-status-bg);
		color: var(--ui-status-text);

		[class*='__slot-'] {
			opacity: 1;
		}
	}
}