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

@use "../vars/vars";

@layer vetools {
	/* region Misc/Shared */
	.ui__ {
		&btn-xxl-square {
			width: 110px;
			height: 110px;
		}

		&ipt-color {
			width: vars.$w-ipt-number-2-digit;
			padding: 0;

			&::-webkit-color-swatch-wrapper {
				padding: 3px;
			}

			&::-webkit-color-swatch {
				border: 1px solid vars.$rgb-border-grey;
			}
		}
	}
	/* endregion */

	/* region List */
	.ui-list__ {
		// TODO refactor all "list" class to use this:
		//  - add "relative" class to each as required
		//  - add "ve-overflow-x-hidden" and "ve-overflow-y-auto" classes
		//  - convert from ul to div
		&wrp {
			transform: translateZ(0);
			font-size: 11.2px;
		}

		&wrp-preview {
			background: vars.$rgb-bg-orange;
			font-size: 90%;
			border-top-left-radius: 5px;
			margin-top: 1px;
			margin-bottom: 4px;
		}

		&btn-inline {
			cursor: pointer;
			color: vars.$rgb-font--muted;

			&:hover {
				background: color.adjust(vars.$rgb-shadow-grey, $lightness: - 20%);
				color: color.adjust(vars.$rgb-font--muted, $lightness: - 25%);
			}
		}
	}
	/* endregion */

	/* region Source overlay */
	.ui-source__ {
		&row {
			margin-left: calc(-96px - 0.5rem);
		}

		&name {
			min-width: 96px;
			white-space: nowrap;
			text-align: right;
		}

		&divider {
			height: 1px;
			width: 30px;
			background: vars.$rgb-border-grey;
			display: inline-block;
			margin: 0 3px;
		}
	}
	/* endregion */

	/* region Modals */
	.ui-modal__ {
		&body-active {
			overflow-y: hidden !important;
		}

		&row {
			margin-bottom: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: initial;
			min-height: 30px;

			&:first-of-type {
				margin-top: -1px;
			}

			&--cb {
				padding: 0 3px;
				border-radius: 3px;

				&:hover {
					background: vars.$rgb-bg--alt;
				}
			}

			&--sel {
				padding: 0 3px;
			}

			> * {
				margin-right: 5px;

				&:last-child {
					margin-right: 0;
				}
			}
		}

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

			&--fullscreen {
				@include vars.mix-shadow-2;
			}
		}

		&footer {
			border-top: 1px solid vars.$rgb-border-grey--trans;

			&--fullscreen {
				@include vars.mix-shadow-2;
			}
		}

		&overlay {
			position: fixed;
			z-index: vars.$z-modal-wrapper;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: vars.$rgb-modal-overlay-grey;
		}

		&overlay-blind {
			background-color: #fff;
		}

		&inner {
			position: relative;
			z-index: vars.$z-modal-inner;
			top: initial;
			left: initial;
			margin: 60px auto;
			padding: 5px 10px;
			height: 400px;
			float: none;
			min-width: 600px;
			max-height: 400px;
			min-height: 400px;
			font-size: 14px;
			background: vars.$rgb-bg;
			border: 1px solid vars.$rgb-border-grey;
			border-radius: 4px;
			box-shadow: 0 6px 12px rgb(0 0 0 / 17.5%);

			@media screen and (width <= #{vars.$width-screen-sm}) {
				min-width: 0;
			}

			@media screen and (width > #{vars.$width-screen-sm}) {
				max-width: 750px;
			}

			@media screen and (width > #{vars.$width-screen-md}) {
				max-width: 970px;
			}

			@media screen and (width > #{vars.$width-screen-lg}) {
				max-width: 1170px;
			}

			&--no-min-height {
				min-height: 0;
				height: initial;
			}

			&--no-min-height {
				min-width: 0;
				width: initial;
			}

			&--uncap-height {
				max-height: calc(100% - 120px);
				height: initial;
			}

			&--uncap-width {
				max-width: calc(100% - 180px);
				width: initial;
			}

			&--max-width-640p {
				max-width: 640px;
			}

			&--mode-fullscreen {
				max-height: 0;
				height: 100vh;
				flex-shrink: 0;
				min-height: 100vh;
				border-radius: 0;
				box-shadow: none;
				border: 0;
			}
		}

		&scroller {
			height: 100%;
			width: 100%;
			min-height: 0;
			overflow-y: auto;
		}
	}
	/* endregion */

	/* region Search */
	.ui-search__ {
		&wrp-output {
			position: relative;
			height: 100%;
			width: 100%;
			display: flex;
			flex-direction: column;
		}

		&wrp-controls {
			width: 100%;
			display: flex;
			z-index: vars.$z-search;

			&--in-tabs {
				margin-top: -1px;
			}
		}

		&wrp-results {
			position: relative;
			padding: 3px;
			transform: translateZ(0);
			height: 100%;
			overflow: hidden auto;
			font-size: 11.2px;
		}

		&row {
			cursor: pointer;
			font-weight: bold;
			padding: 1px 2px;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid vars.$rgb-border-grey;

			&:hover {
				background: #d3d3d3;
			}

			&:focus {
				@include vars.mix-row-glow-active;
			}
		}

		&sel-category {
			border-radius: 0;
			max-width: 180px;
			flex-shrink: 0;
			border-right: 0;
		}

		&ipt-search {
			border-radius: 0;
			width: 100%;
		}

		&ipt-search-sub-ipt[type="radio"] {
			display: inline-block;
			margin: 0 3px 0 0;
		}

		&ipt-search-sub-ipt-custom {
			max-width: 30px;
			border-radius: 0;
			border-left: 0;
			margin-right: -1px;
			border-right-color: #e0e0e0;
			border-left-color: #e0e0e0;
			padding-left: 0;

			/* TODO switch this field to a validated text-type input, instead of a number */
			&[type="number"]::-webkit-inner-spin-button {
				margin: 0;
				/* stylelint-disable-next-line property-no-vendor-prefix */
				-webkit-appearance: none;
			}
		}

		&ipt-search-sub-wrp {
			flex-shrink: 0;
			margin-bottom: 0;
			padding: 5px;
			font-weight: normal;
			border: 1px solid vars.$rgb-border-grey;
			height: 34px;
			border-left: 0;
		}

		&ipt-search-sub-lbl {
			display: flex;
			align-items: center;
			height: 100%;

			&:not(:last-child) {
				margin-right: 7px;
			}
		}

		&message {
			font-size: 1.4rem;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: "Times New Roman", serif;
			font-variant: small-caps;
			font-weight: 500;
		}
	}
	/* endregion */

	/* region Tabs */
	.ui-tab__ {
		&btn-tab-head {
			display: inline-block;
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
			cursor: pointer;
			user-select: none;
			border-bottom: 0;

			&.active {
				background-color: #e6e6e6;
				border-color: #adadad;
			}

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

		&wrp-tab-body {
			width: 100%;
			height: 100%;
			overflow: hidden auto;

			&--border {
				padding: 3px 0;
			}

			&--background {
				background: vars.$rgb-bg;
				border: 1px solid vars.$rgb-border-grey--trans;
				border-top: 0;
				border-bottom-color: vars.$rgb-border-grey--trans-muted;
			}
		}

		&wrp-tab-heads {
			&--border {
				border-bottom: 1px solid vars.$rgb-border-grey;
			}

			&--stacked {
				padding-bottom: 1px;
			}
		}
	}

	.ui-tab-side__ {
		$w-tab: 120px;
		$w-tab-mobile-ish: 33px;

		&disp-active-tab-name {
			margin-left: $w-tab + 6px;
			font-size: 28px;

			@media screen and (width <= #{vars.$width-screen-lg}) {
				margin-left: $w-tab-mobile-ish + 6px;
			}
		}

		&btn-tab {
			width: $w-tab;

			@media screen and (width <= #{vars.$width-screen-lg}) {
				width: 33px;
				height: 30px;
			}
		}

		&icon-tab {
			min-width: 15px;
			min-height: 12px;
		}

		&wrp-tab {
			background: vars.$rgb-bg;
			border: 1px solid vars.$rgb-border-grey--trans;
			border-bottom: 0;

			&--single {
				border: 0;
			}
		}
	}
	/* endregion */

	/* region Proficiency */
	.ui-prof__ {
		&btn-cycle {
			@include vars.mix-cb-custom;

			&[data-state="0"] {
				background: #fff;
			}

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

			&[data-state="2"] {
				background: vars.$rgb-cb-grey;
				border-color: color.adjust(vars.$rgb-cb-grey, $lightness: 15%);
				display: flex;
				line-height: 14px;
				-moz-osx-font-smoothing: grayscale;
				-webkit-font-smoothing: antialiased;
				font-style: normal;
				font-variant: normal;
				text-rendering: auto;
				font-family: "Font Awesome 5 Pro", monospace;
				font-weight: 900;
				color: #fff;
				font-size: 12px;

				&::before {
					content: "\f005"; /* star */
				}
			}

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

	/* region Direction picker */
	.ui-dir__ {
		&face {
			position: relative;
			width: 92px;
			height: 92px;
			border-radius: 46px;
			background: #f0f0f0;
			border: 1px solid vars.$rgb-border-grey;
			user-select: none;
			cursor: grab;
		}

		&arm {
			width: 1px;
			height: 40px;
			background: #333;
			position: absolute;
			top: 46px;
			left: 46px;
			transform: rotate(180deg);
			transform-origin: top;
			pointer-events: none;
			user-select: none;
			box-shadow: 0 0 2px 0 rgb(0 0 0 / 75%);
		}
	}
	/* endregion */

	/* region Icon picker */
	.ui-icn__ {
		&wrp-icon {
			font-size: 24px;
		}
	}
	/* endregion */

	/* region Drag to re-order */
	.ui-drag__ {
		&wrp-drag-block {
			position: absolute;
			inset: 0;
			cursor: move;
		}

		&wrp-drag-dummy--highlight {
			background: #cfe5ff78;
		}

		&wrp-drag-dummy--lowlight {
			background: transparent;
		}

		&patch {
			cursor: move;
			user-select: none;
			display: flex;
			flex-shrink: 0;
			padding: 5px 3px;
			width: 14px;
			font-size: 14px;
		}

		&dummy-patch {
			width: 14px;
		}

		&patch-col {
			display: flex;
			flex-direction: column;
			flex-shrink: 0;
		}

		&patch-col > div {
			line-height: 4px;
			text-align: center;
		}
	}
	/* endregion */

	/* region Hover tips */
	.ui-tip__ {
		&parent {
			cursor: help;
			position: relative;
		}

		&child {
			@include vars.mix-shadow-1;

			display: none;
			position: absolute;
			border: 1px solid vars.$rgb-border-grey;
			background: #fff;
			border-radius: 3px;
			z-index: 1;
			top: calc(100% + 5px);
			padding: 5px;
			opacity: 0;
			transition: opacity vars.$time-5-frames ease-in-out;
			pointer-events: none;
		}

		&parent:hover .ui-tip__child {
			display: flex;
			opacity: 1;
		}
	}
	/* endregion */

	/* region Context menu */
	.ui-ctx {
		&__wrp {
			@include vars.mix-shadow-1--dark;

			z-index: vars.$z-context-menu;
			font-size: 14px;
			background: vars.$rgb-bg;
			border: 1px solid vars.$rgb-border-grey--trans;
			border-top-color: vars.$rgb-border-grey;
		}

		&__divider {
			height: 1px;
			width: 100%;
			background: vars.$rgb-border-grey;
		}

		&__row {
			min-width: 160px;
		}

		&__btn {
			cursor: pointer;

			&:hover {
				background: vars.$rgb-bg--alt;
			}

			&.disabled,
			&.disabled:hover {
				cursor: default;
				background: vars.$rgb-bg;
			}
		}
	}
	/* endregion */

	/* region Picker */
	.ui-pick {
		&__ {
			&wrp-btns {
				// Match the height of a pill -- 1 line of text, mb-1, 1px top/bottom border
				min-height: calc((1em * #{vars.$font-line-height}) + (#{vars.$spacer} * 0.25) + 2px);
			}

			&btn-add {
				font-weight: bold;
				padding: 1px 2px;
				font-size: 18px;
				display: flex;
				height: 16px;

				&--sub {
					line-height: 11px;
					height: 14px;
					font-size: 16px;
					border-radius: 0;
					padding: 0 1px;
					font-weight: bold;
				}
			}

			&btn-remove {
				width: 10px;
				line-height: 20px;
				padding: 0;
				border-radius: 0;
				font-size: 12px;
				flex-shrink: 0;
				flex-grow: 0;
				cursor: pointer;
				font-style: initial;

				&--sub {
					height: 18px;
					line-height: 16px;
				}
			}

			&pill {
				align-items: stretch;
			}

			&disp-text {
				border: 1px solid vars.$rgb-border-grey;
				border-right: 0;
			}
		}
	}
	/* endregion */

	/* region Fontawesome Icons */
	.fa {
		&--btn-sm {
			position: relative;
			top: 1px;
			font-size: 15px;
		}

		&--btn-xs {
			position: relative;
			font-size: 12px;

			&::before {
				width: 12px;
				height: 14px;
				display: inline-block;
				text-align: center;
			}

			/* Specific adjustments for certain icons */
			&.fa-dice {
				left: -2px;
			}
		}
	}
	/* endregion */

	/* region "Copied" tooltip */
	.clp__ {
		&wrp-temp {
			position: fixed;
			top: -10000px;
			left: -10000px;
			width: 1px;
			height: 1px;
		}

		&disp-copied {
			position: fixed;
			white-space: nowrap;
			width: auto;
			transform: translateX(-50%);
			pointer-events: none;
			user-select: none;
			height: 24px;
			font-size: 12px;
			z-index: vars.$z-temp-effect;
			background: radial-gradient(ellipse at center, vars.$rgb-bg 0%, vars.$rgb-bg 35%, transparent 75%, transparent 100%);
		}
	}
	/* endregion */

	/* region Decorated inputs */
	.ui-ideco__ {
		&ipt {
			&--left {
				padding-left: 22px !important;
			}

			&--right {
				padding-right: 22px !important;
			}
		}

		&wrp {
			position: absolute;
			top: 0;
			bottom: 0;
			opacity: 0.5;
			justify-content: center;

			> .glyphicon {
				top: 0;
			}

			&--left {
				left: 5px;
			}

			&--right {
				right: 5px;
			}
		}

		&btn-ticker {
			transition: opacity vars.$time-2-frames;
			opacity: 0;

			width: 14px;
			height: 10px;
			border: 0;
			font-size: 14px;
			line-height: 10px;
			border-radius: 0;

			background: #0003;
			color: vars.$rgb-off-black;

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

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

			&:active,
			&:focus,
			&:active:focus {
				background: #0007;
				color: vars.$rgb-off-black;
			}
		}

		&ipt:hover + .ui-ideco__wrp .ui-ideco__btn-ticker,
		&wrp:hover .ui-ideco__btn-ticker {
			transition: opacity vars.$time-2-frames;
			opacity: 1;
		}
	}
	/* endregion */

	/* region Select2 */
	.ui-sel2__ {
		&ipt-search {
			top: 0;
			right: 0;
			left: 0;
			opacity: 0;
			background: transparent;
		}

		&ipt-display {
			padding-right: 20px;
		}

		&wrp {
			&:focus,
			&:focus-within {
				> .ui-sel2__ipt-search {
					opacity: 1;
				}

				> .ui-sel2__ipt-display {
					text-align: right;
					color: vars.$rgb-font--muted;
					font-weight: bold;
				}

				> .ui-sel2__wrp-options {
					display: flex;
				}
			}
		}

		&wrp-options {
			z-index: 1;
			top: 22px;
			right: 0;
			left: 0;
			display: none;
			flex-direction: column;
			background: vars.$rgb-bg;
			border: 1px solid vars.$rgb-border-grey;
			border-top: 0;
			max-height: 200px;

			&:hover,
			&:active,
			&:focus,
			&:focus-within {
				display: flex;
			}
		}

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

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

		&disp-arrow {
			top: 4px;
			right: 4px;
			bottom: 0;
			font-size: 12px;
		}
	}
	/* endregion */

	/* region Range Slider */
	.ui-slidr {
		&__ {
			$sz-top-row-pad: 6px;

			&wrp {
				font-size: 14px;
			}

			&wrp-top {
				// (Nothing yet)
			}

			&thumb {
				width: 14px;
				height: 18px;
				top: -5px;
				background: vars.$rgb-bg--alt;
				border: 1px solid vars.$rgb-border-grey;
				border-radius: 2px;

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

			&wrp-track {
				padding-top: $sz-top-row-pad;
				padding-bottom: 7px;
			}

			&track-outer {
				border: 1px solid vars.$rgb-border-grey;
				height: 10px;
				border-radius: 3px;
			}

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

			&disp-value {
				width: 80px;
				height: 26px;
				border-radius: 4px;

				&--visible {
					border: 1px solid vars.$rgb-border-grey;
					background: vars.$rgb-bg;
				}

				&--left {
					margin-right: 15px;
				}

				&--right {
					margin-left: 15px;
				}
			}

			&wrp-bottom {
				height: 3em; // Padded so our `absolute` elements have space
			}

			&wrp-pips {
				padding-top: 6px;
			}

			&pip {
				width: 1px;
				height: 4px;
				background: vars.$rgb-border-grey;

				&--major {
					height: 6px;
					background: color.adjust(vars.$rgb-border-grey, $lightness: - 15%);
				}
			}

			&pip-label {
				top: 0;
				width: 24px;
				height: 20px;
				padding-top: 20px;
			}
		}
	}
	/* endregion */
}
