/*!
 * jodit-ui-themes: Office 2010 theme for Jodit
 * https://github.com/TimurSeyidov/jodit-ui-themes
 * Released under the MIT license, see LICENSE in the project root.
 */

// Office 2010 theme, file browser part: Windows 7 Explorer look for the free
// Jodit file browser and the Jodit PRO finder. Buttons, inputs and menus
// inside the file browsers come from the editor part (office2010.editor.css).

// Usage: load the stylesheet after the Jodit styles and set
// `theme: 'office2010'`. Jodit names its custom properties `--jd-*` in the
// built CSS, so the theme overrides them by those names.
//
// The theme class lands on the editor container and popups
// (`jodit_theme_office2010`), on dialogs (`jodit-dialog_theme_office2010`)
// and on the Jodit PRO finder window (`jodit-file-browser-pro_theme_office2010`).

:is(
		.jodit_theme_office2010,
		.jodit-dialog_theme_office2010,
		.jodit-file-browser-pro_theme_office2010
	) {
	--office-frame: #8ba0bc;
	--office-line: #a7bad7;
	--office-ribbon: linear-gradient(#e7eff9, #d6e3f3 45%, #c9daf0);
	--office-bar: linear-gradient(#e4ecf7, #c7d8ee);
	--office-title: #15428b;
	--office-text: #1e395b;
	--office-item-hover: linear-gradient(#fafbfd, #ebf3fd);
	--office-item-hover-border: #b8d6fb;
	--office-item-selected: linear-gradient(#dcebfc, #c1dbfc);
	--office-item-selected-border: #7da2ce;
	--office-folder-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14'%3E%3Cpath d='M1 2.5C1 1.7 1.7 1 2.5 1h3.6l1.6 1.6h5.8c.8 0 1.5.7 1.5 1.5v7.4c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%23e8b84a'/%3E%3Cpath d='M1 5h14v6.5c0 .8-.7 1.5-1.5 1.5h-11C1.7 13 1 12.3 1 11.5z' fill='%23fbd96e'/%3E%3C/svg%3E");

	// Free Jodit file browser
	.jodit-file-browser-tree {
		--jd-color-background-filebrowser-folders: #f1f5fb;
		--jd-color-folder-title: var(--office-text);

		border-right: 1px solid var(--office-line);
		background: linear-gradient(90deg, #f6f9fd, #e9f0f9);

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

		&::-webkit-scrollbar-thumb {
			background-color: #c2d3ea;
			outline: 0;
		}

		&__item {
			min-height: 26px;
			padding: 2px 6px;
			border: 1px solid transparent;
			margin: 1px 4px;
			border-radius: 3px;
			color: var(--office-text);

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

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

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

			&:hover .jodit-file-browser-tree__item-title {
				color: #000;
			}

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

		&__source-title {
			padding: 4px 8px;
			border-bottom: 1px solid var(--office-line);
			background: var(--office-bar);
			color: var(--office-title);
			font-weight: 600;
		}

		&__plus {
			margin: 6px 4px;
		}
	}

	.jodit-file-browser-files {
		background: #fff;

		&__item {
			border-color: transparent;
			border-radius: 3px;
			text-decoration: none;

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

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

				.jodit-file-browser-files__item-info {
					background-color: transparent;
					color: #000;
				}
			}
		}

		// 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: 3px solid #fff;
				margin: auto 0;
				box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
			}

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

				> span {
					color: #6d6d6d;
					font-size: 11px;
					line-height: 15px;
				}

				> .jodit-file-browser-files__item-info-filename {
					color: #000;
					font-size: 12px;
					font-weight: normal;
				}
			}
		}

		// List: Explorer "Details" rows
		&_view_list a {
			border-color: #eef2f8;

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

				.jodit-file-browser-files__item-info {
					color: #000;
				}
			}

			.jodit-file-browser-files__item-info > span {
				color: #000;
				font-weight: normal;
			}
		}
	}

	.jodit-file-browser-preview__navigation {
		svg {
			fill: var(--office-frame);
		}

		&:hover svg {
			fill: var(--office-title);
		}
	}

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

	.jodit-file-browser-pro__panel {
		border: 1px solid var(--office-frame);
		border-radius: 4px;
		box-shadow: 0 4px 16px rgb(0 0 0 / 35%);
	}

	.jodit-file-browser-pro__header {
		min-height: 40px;
		border-bottom-color: var(--office-frame);
		border-radius: 3px 3px 0 0;
		background: var(--office-ribbon);
	}

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

	.jodit-file-browser-pro__resizer svg {
		fill: var(--office-frame);
	}

	// Explorer palette for the finder's own tokens
	.jodit-ui-browser-panel {
		--jd-fb-color: var(--office-text);
		--jd-files-bg: #fff;
		--jd-item-bg: transparent;
		--jd-item-bg-hover: #ebf3fd;
		--jd-item-border-color: #eef2f8;
		--jd-item-border-selected-color: var(--office-item-selected-border);
		--jd-item-border-bg-selected-color: #cde2fc;
		--jd-item-info-color: #000;
		--jd-item-info-bg: transparent;
		--jd-sidebar-bg: #f1f5fb;
		--jd-sidebar-color: var(--office-text);
		--jd-sidebar-border-color: var(--office-line);
		--jd-sidebar-hide-btn-bg: #e4ecf7;
		--jd-folder-bg: #ebf3fd;
		--jd-folder-border: var(--office-item-hover-border);
		--jd-source-bg: #dbe6f4;
		--jd-source-border: var(--office-line);
		--jd-message-bg: #fffbe6f0;
		--jd-message-color: #000;
		--jd-message-shadow-color: #8ba0bc;
	}

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

		&::-webkit-scrollbar-thumb {
			background-color: #c2d3ea;
			outline: 0;
		}
	}

	// Navigation pane
	.jodit-ui-sidebar {
		background: linear-gradient(90deg, #f6f9fd, #e9f0f9);
	}

	.jodit-ui-browser-source__name {
		height: auto;
		padding: 5px 8px;
		background: var(--office-bar);
		color: var(--office-title);
		font-weight: 600;
	}

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

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

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

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

			svg {
				display: none;
			}
		}

		&__arrow svg {
			fill: var(--office-frame);
		}
	}

	// Files: Explorer selection colors
	.jodit-ui-browser-item {
		border: 1px solid transparent;
		border-radius: 3px;

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

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

		&__name {
			font-weight: normal;
		}
	}

	// 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);
		}

		// 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: #6d6d6d;
			font-size: 11px;
		}
	}

	// Status bar
	.jodit-ui-browser-status-bar {
		border-top-color: var(--office-frame);
		background: var(--office-bar);
		color: var(--office-title);

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

	// 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 with the ribbon's pressed state
	.jodit-ui-browser-settings {
		border-left-color: var(--office-line);
		background: #f6f9fd;
		color: var(--office-text);

		&__theme {
			display: none;
		}

		&__title {
			color: var(--office-title);
		}

		&__close {
			color: var(--office-text);

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

			&:hover {
				color: var(--office-title);
			}
		}

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

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

		.jodit-ui-button-group__options {
			display: inline-flex;
			overflow: hidden;
			border: 1px solid #8ba0bc;
			border-radius: 3px;
		}

		.jodit-ui-button-group .jodit-ui-button {
			border: 0;
			border-radius: 0;
			background: linear-gradient(#fdfdfe, #eef3fa 45%, #e1e9f5 50%, #e7eef8);
			box-shadow: none;
			color: var(--office-text);
			outline: 0;

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

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

			&:hover:not([disabled]) {
				background: linear-gradient(#fffcea, #fff1bd 45%, #ffe38d 50%, #fff4c7);
			}

			&[aria-pressed='true']:not([disabled]) {
				background: linear-gradient(#fcd9a2, #fbc77a 45%, #f9ad49 50%, #fcd38c);
				box-shadow: none;

				.jodit-ui-button__text {
					color: #000;
				}
			}
		}
	}
}