/*
Shared UI components
 */
@use "sass:color";

@use "../vars/vars";
@use "../vars/vars-night";

@layer vetools {
	/* region Misc/Shared */
	.ve-night-mode .ui__ {
		&ipt-color {
			&::-webkit-color-swatch {
				border: 0;
			}
		}
	}
	/* endregion */

	/* region List */
	.ve-night-mode .ui-list__ {
		&wrp-preview {
			background: vars-night.$rgb-bg--night;
		}

		&btn-inline {
			color: vars-night.$rgb-font--night;

			&:hover {
				color: color.adjust(vars-night.$rgb-font--night, $lightness: 10%);
				background: #ffffff30;
			}
		}
	}
	/* endregion */

	/* region Source overlay */
	.ve-night-mode .ui-source__ {
		&divider {
			background: vars-night.$rgb-border-grey--night;
		}
	}
	/* endregion */

	/* region Modals */
	.ve-night-mode .ui-modal__ {
		&header {
			&--border {
				border-color: vars-night.$rgb-border-grey--trans-night;
			}
		}

		&footer {
			border-color: vars-night.$rgb-border-grey--trans-night;
		}

		&overlay-blind {
			background-color: vars-night.$rgb-bg--night;
		}

		&inner {
			background: vars-night.$rgb-bg--night;
			box-shadow: 0 6px 12px rgb(0 0 0 / 56%);
			border-color: vars-night.$rgb-border-grey--trans-night;

			&--mode-fullscreen {
				box-shadow: none;
			}
		}

		&row--cb:hover {
			background: vars-night.$rgb-bg--alt-night;
		}
	}
	/* endregion */

	/* region Search */
	.ve-night-mode .ui-search__ {
		&row {
			border-color: vars-night.$rgb-border-grey--night;

			&:hover {
				background: vars.$rgb-off-black;
			}
		}

		&ipt-search-sub-wrp {
			border-color: vars-night.$rgb-border-grey--night;
		}
	}
	/* endregion */

	/* region Tabs */
	.ve-night-mode .ui-tab__ {
		&btn-tab-head {
			&--active,
			&--active:focus,
			&--active:hover,
			&--active:active {
				background-color: vars-night.$rgb-btn-default-active--night;
			}

			&--stacked {
				border-bottom: 1px solid vars-night.$rgb-border-grey--night;
			}
		}

		&wrp-tab-body {
			&--background {
				background: vars-night.$rgb-bg--night;
				border-color: vars-night.$rgb-border-grey--trans-night;
				border-bottom-color: color.adjust(vars-night.$rgb-border-grey--trans-night, $lightness: - 15%);
			}
		}

		&wrp-tab-heads--border {
			border-color: vars-night.$rgb-border-grey--night;
			border-width: 2px;
		}
	}

	.ve-night-mode .ui-tab-side__ {
		&wrp-tab {
			background: vars-night.$rgb-bg--night;
			border-color: vars-night.$rgb-border-grey--trans-night;
		}
	}
	/* endregion */

	/* region Proficiency */
	.ve-night-mode .ui-prof__ {
		&btn-cycle {
			border-color: vars-night.$rgb-border-grey--night;

			&:active {
				@include vars-night.mix-shadow-active--night;
			}

			&[data-state="0"] {
				background: vars-night.$rgb-bg--night;
			}

			&[data-state="1"] {
				background: vars-night.$rgb-border-grey--night;
				border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
			}

			&[data-state="2"] {
				background: vars-night.$rgb-border-grey--night;
				border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);

				&::before {
					color: vars-night.$rgb-bg--night;
				}
			}

			&[data-state="3"] {
				background: repeating-linear-gradient(135deg, vars-night.$rgb-bg--night, vars-night.$rgb-bg--night 10px, vars-night.$rgb-border-grey--night 10px, vars-night.$rgb-border-grey--night 20px);
				border-color: color.adjust(vars-night.$rgb-border-grey--night, $lightness: 10%);
			}
		}
	}
	/* endregion */

	/* region Direction picker */
	.ve-night-mode .ui-dir__ {
		&face {
			background: vars-night.$rgb-bg--night;
			border-color: vars-night.$rgb-border-grey--night;
		}

		&arm {
			background: vars-night.$rgb-font--night;
			box-shadow: none;
		}
	}
	/* endregion */

	/* region Hover tips */
	.ve-night-mode .ui-tip__ {
		&child {
			border-color: vars-night.$rgb-border-grey--night;
			background: vars-night.$rgb-bg--night;
		}
	}
	/* endregion */

	/* region Context menu */
	.ve-night-mode .ui-ctx {
		&__wrp {
			background: vars-night.$rgb-bg--night;
			border: 1px solid vars-night.$rgb-border-grey--trans-night;
			border-top-color: vars-night.$rgb-border-grey--night;
		}

		&__divider {
			background: vars-night.$rgb-border-grey--night;
		}

		&__btn {
			color: vars-night.$rgb-font--night;

			&:hover {
				background: vars-night.$rgb-bg--alt-night;
				color: #fff;
			}

			&.disabled,
			&.disabled:hover {
				background: vars-night.$rgb-bg--night;
				color: vars-night.$rgb-font--night;
			}
		}
	}
	/* endregion */

	/* region Picker */
	.ve-night-mode .ui-pick {
		&__ {
			&disp-text {
				border-color: vars-night.$rgb-border-grey--night;
			}
		}
	}
	/* endregion */

	/* region "Copied" tooltip */
	.ve-night-mode .clp__ {
		&disp-copied {
			background: radial-gradient(ellipse at center, vars-night.$rgb-bg--night 0%, vars-night.$rgb-bg--night 35%, transparent 75%, transparent 100%);
		}
	}
	/* endregion */

	/* region Decorated inputs */
	.ve-night-mode .ui-ideco__ {
		&btn-ticker {
			background: vars-night.$rgb-border-grey--night;
			color: #fff;

			&:hover,
			&:active,
			&:focus,
			&:active:focus {
				box-shadow: none;
				outline: none;
			}

			&:hover {
				background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-hover);
				color: #fff;
			}

			&:active,
			&:focus,
			&:active:focus {
				background: color.adjust(vars-night.$rgb-border-grey--night, $lightness: - vars.$pct-darken-active);
				color: #fff;
			}
		}
	}
	/* endregion */

	/* region Select2 */
	.ve-night-mode .ui-sel2__ {
		&ipt-search {
			background: vars-night.$rgb-bg--night;
		}

		&wrp-options {
			background-color: vars-night.$rgb-bg--night;
			border-color: vars-night.$rgb-border-grey--night;
		}

		&disp-option {
			&.active,
			&:focus,
			&:hover {
				background: vars-night.$rgb-bg--alt-night;
			}

			&:focus.active,
			&:hover.active {
				background: color.adjust(vars-night.$rgb-bg--alt-night, $lightness: vars.$pct-darken-active);
			}
		}
	}
	/* endregion */

	/* region Range Slider */
	.ve-night-mode .ui-slidr {
		&__ {
			&thumb {
				background: vars.$rgb-border-grey--trans;
				border-color: vars-night.$rgb-font--night;

				&--hover,
				&:hover {
					background: color.adjust(vars.$rgb-border-grey--trans, $lightness: 10%);
					border-color: vars-night.$rgb-font--night;
				}
			}

			&track-outer {
				border-color: vars-night.$rgb-border-grey--night;
			}

			&track-inner {
				background: vars-night.$rgb-border-grey--trans-night;
			}

			&disp-value {
				&--visible {
					border-color: vars-night.$rgb-border-grey--night;
					background: vars-night.$rgb-bg--night;
				}
			}

			&pip {
				background: vars-night.$rgb-font--night;
			}
		}
	}
	/* endregion */
}
