/*SDOC***********************************************************************

	Module:				framework.css

	Author:				Niall burton

	Copyright (C) 2023 Corel Corporation

	Description:	HTML Theming for Wasm Elements

***********************************************************************EDOC*/

/*
Warning: Beware of shorthand properties since they may discard styling in other
declarations. Prefer e.g. `border-style, border-width` over `border`.
*/

:root {
	--ScrollbarBackground: var(--TabWell);
	--ScrollbarThumb: var(--GlyphDisabled);
	--ScrollbarThumbSize: 100%;
	--ScrollbarThumbOffset: 0;
	--ScrollbarThumbHover: var(--GlyphNormal);
	--ScrollbarThumbActive: var(--GlyphHot);
	--ScrollbarButton: var(--ScrollbarBackground);
	--ScrollbarButtonSize: 16px;
	--ScrollbarButtonHover: var(--ScrollbarThumb);
	--ScrollbarButtonActive: var(--ScrollbarThumbHover);

	--ScrollbarArrowUp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 552 275' width='16' height='8'><path d='m3.5 274.5l274.3-274.3 274.2 274.3z'/></svg>");
	--ScrollbarArrowDown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 552 275' width='16' height='8'><path d='m3.5 1.5l274.3 274.3 274.2-274.3z'/></svg>");
	--ScrollbarArrowLeft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 277 554' width='8' height='16'><path d='m275.8 1l-274.3 274.3 274.3 274.2z'/></svg>");
	--ScrollbarArrowRight: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 277 554' width='8' height='16'><path d='m1.5 1l274.3 274.3-274.3 274.2z'/></svg>");
}

@media (prefers-color-scheme: dark) {
	:root {
		--ScrollbarArrowUp: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 552 275' width='16' height='8' style='fill:white'><path d='m3.5 274.5l274.3-274.3 274.2 274.3z'/></svg>");
		--ScrollbarArrowDown: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 552 275' width='16' height='8' style='fill:white'><path d='m3.5 1.5l274.3 274.3 274.2-274.3z'/></svg>");
		--ScrollbarArrowLeft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 277 554' width='8' height='16' style='fill:white'><path d='m275.8 1l-274.3 274.3 274.3 274.2z'/></svg>");
		--ScrollbarArrowRight: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 277 554' width='8' height='16' style='fill:white'><path d='m1.5 1l274.3 274.3-274.3 274.2z'/></svg>");
	}
}

body {
	background-color: var(--PrimarySurface);
	overscroll-behavior: none;
}

*:not(input, [tabindex], :has(.WasmActualDocumentView)) {
	user-select: none;
	-webkit-user-select: none;
	-moz-user-select: none;
}

input[type='range'].WasmSlider {
	-webkit-appearance: none;
	width: var(--trackWidth);
	margin: auto;
}

/* For Chrome and siblings */
input[type='range'].WasmSlider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: var(--thumbWidth);
	height: var(--thumbHeight);
	cursor: pointer;
	border-radius: 0;
	border: none;
	margin-top: calc((var(--thumbHeight) - var(--trackHeight)) * -0.5);
	background-color: rgb(200, 200, 200);
	padding: 0;
}

input[type='range'].WasmSlider::-webkit-slider-runnable-track {
	width: 100%;
	height: var(--trackHeight);
	cursor: pointer;
	background: #d3d3d3;
	flex: none;
}

/* For Firefox */
input[type='range'].WasmSlider::-moz-range-thumb {
	width: var(--thumbWidth);
	height: var(--thumbHeight);
	cursor: pointer;
	border-radius: 0;
	border: none;
	background-color: rgb(200, 200, 200);
}

input[type='range'].WasmSlider::-moz-range-track {
	width: 100%;
	height: var(--trackHeight);
	cursor: pointer;
	background: #d3d3d3;
}

/* Radio button */
input[type="radio"] {
	appearance: none;
	border-radius: 50%;
	/* Hard coded size based on observed default size in Google chrome. */
	width: 13px;
	height: 13px;
	outline: 1px solid var(--Border);
	background-color: var(--ListBackground);
}

input[type="radio"]:checked {
	border: 2px solid var(--ListBackground);
	background-color: var(--Text);
}

input[type="radio"]:disabled:checked {
	background-color: var(--BaseControlDisabledOutline);
}

input[type="radio"].WasmButton:hover:enabled {
	outline-color: var(--BaseControlHotOutline);
}

input[type="radio"].WasmButton:focus:enabled {
	outline-color: var(--BaseControlFocusOutline);
}

/* Push button */
input[type="button"].WasmButton {
	color: var(--PushButtonTextColor);
	border-color: var(--PushButtonOutline);
	border-radius: var(--PushButtonCornerRadius);
	background-color: var(--PushButtonFill);
	border-width: 1px;
	border-style: solid;
}

input[type="button"].WasmButton:disabled {
	color: var(--GlyphDisabled);
	border-color: var(--BaseControlDisabledOutline);
	background-color: var(--BaseControlDisabledFill);
}

input[type="button"].WasmButton:hover:enabled {
	border-color: var(--PushButtonHotOutline);
	background-color: var(--PushButtonHotFill);
}

input[type="button"].WasmButton:active:enabled {
	color: var(--PushButtonPushedTextColor);
	border-color: var(--PushButtonPushedOutline);
	background-color: var(--PushButtonPushedFill);
}

input[type="button"].WasmButton:focus:enabled {
	border-color: var(--PushButtonFocusOutline);
	outline: none;
}

/* Push button primary */
input[type="button"].WasmButtonPrimary {
	color: var(--BaseControlPushedTextColor);
	border-color: var(--PrimaryPushButtonFill);
	background-color: var(--PrimaryPushButtonFill);
}

input[type="button"].WasmButtonPrimary:hover:enabled,
input[type="button"].WasmButtonPrimary:active:enabled {
	color: var(--BaseControlPushedTextColor);
	border-color: var(--PrimaryPushButtonHotFill);
	background-color: var(--PrimaryPushButtonHotFill);
}

.WasmEditbox {
	resize: none;
}

textarea.WasmEditbox {
	overflow-y: auto;
}

/* The parent div of WasmEditBox */
.WasmEditboxRoot {
	box-sizing: border-box;

	scrollbar-color: var(--ScrollbarThumb) transparent; /* Chrome and Firefox only */
	scrollbar-width: thin;
}

.WasmEditbox {
	resize: none;
}

textarea.WasmEditbox {
	overflow-y: auto;
}

/* EditBox - For Chrome and siblings */
.WasmEditbox::-webkit-input-placeholder {
	color: var(--GlyphNormal);
}

/* EditBox - For Firefox */
.WasmEditbox::-moz-placeholder {
	color: var(--GlyphNormal);
}

/* Badges */
.WasmBadge {
	width: fit-content;
	height: fit-content;
	position: absolute;
	border-radius: 999px;
	font-size: 10px;
	padding: 2px 8px;
	font-weight: 700;
	pointer-events: none;

	color: var(--PrimarySurface);
	background: var(--Badge);
}

/* Badges that were hidden */
.WasmBadge:empty {
	display: none;
}

.WasmFrameWindowRadiusStyling, .WasmFrameWindowRadiusStyling > canvas  {
	border-radius: var(--AppFrameCornerRadius);
}

.WasmFrameWindowStadiumRadiusStyling, .WasmFrameWindowStadiumRadiusStyling > canvas {
	border-radius: 50vh; /* 50% of the containing viewport height */
}

/* Base for CreateHTMLElement */
.WasmElement {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	border-width: 1px;
	border-style: solid;
	border-radius: var(--BaseControlCornerRadius);
	border-color: var(--BaseControlOutline);
	outline: none;
	overflow: hidden;
	font-size: 12px;
	font-family: var(--UIFontFamily);
}

.PopupFrameContainer {
	position: relative;
	width: max-content;
	height: max-content;
}

.PopupBeakRight {
	clip-path: path('M 0 0 A 6.5 6.5 0 0 0 2.24489 4.91366 L 8.96390 10.73216 A 3 3 0 0 1 8.96390 15.26784 L 2.24489 21.08634 A 6.5 6.5 0 0 0 0 26');
}

.PopupBeakContainer {
	width: fit-content;
	height: fit-content;
	position: absolute;
	pointer-events: none;
}

/* All with text */
.WasmButton,
.WasmComboBox,
.WasmEditbox,
.WasmLabel,
.WasmSpinBox {
	color: var(--Text);
}

/* All with border and background "button style"*/
.WasmButton,
.WasmCellComboBtn,
.WasmSpinBoxBtn,
select.WasmComboBox {
	border-radius: var(--BaseControlCornerRadius);
	border-color: var(--BaseControlOutline);
	background-color: var(--BaseControlFill);
	color: var(--Text);
}

.WasmButton:hover:enabled
select.WasmComboBox:hover:enabled {
	border-color: var(--BaseControlHotOutline);
	background-color: var(--BaseControlHotFill);
}

/* All with border and background "edit style"*/
.WasmComboBox,
.WasmEditbox,
.WasmSpinBox {
	border-radius: var(--BaseControlCornerRadius);
	border-color: var(--BaseControlOutline);
	background-color: var(--ListBackground);
}

.WasmEditbox:hover:enabled {
	border-color: var(--BaseControlHotOutline);
}

.WasmEditbox:focus:enabled {
	border-color: var(--BaseControlFocusOutline);
}

.WasmEditbox:active:enabled {
	border-color: var(--EditBoxPushedOutline);
}

/* Only hover and focus for ComboBoxs that don't have edit boxes*/
.WasmComboHoverStyling:hover:enabled {
	border-color: var(--BaseControlHotOutline);
	background-color: var(--BaseControlHotFill);
}
.WasmComboHoverStyling:active:enabled {
	border-color: var(--BaseControlPushedOutline);
	background-color: var(--BaseControlPushedFill);
}
.WasmComboHoverStyling:focus:enabled {
	border-color: var(--BaseControlFocusOutline);
	background-color: var(--BaseControlPushedFill);
}

.WasmComboHoverStyling:active:enabled:not(.WasmComboBoxImage),
.WasmComboHoverStyling:focus:enabled:not(.WasmComboBoxImage) {
	color: var(--BaseControlPushedTextColor);
}

/* Styling for Painted ComboBoxes' input element when the combo is dropped*/
.WasmComboPaintedInputActiveSyling {
	color: var(--BaseControlPushedTextColor);
}

/* All buttons with arrows */
.WasmCellComboBtn,
.WasmSpinBoxBtn {
	padding: 0;
	border-width: 1px;
	border-style: solid;
	font-size: 8px;
	font-family: var(--UIFontFamily);
}

/* SpinBox increment/decrement buttons */
.WasmSpinBoxBtn {
	display: block;
	overflow: hidden;
}

/* CellCombo drop down button */
.WasmCellComboBtn {
	height: 100%;
	padding: 0;
	width: 22px;
}

/* ComboBox drop down list */
select.WasmComboBox option {
	background-color: var(--ListBackground);
	color: var(--Text);
}

/* Disabled controls */
.WasmDisabled,
*:disabled {
	color: var(--GlyphDisabled);
	border-color: var(--GlyphDisabled);
	outline-color: var(--GlyphDisabled);
}

.BackingDiv {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
/* Scrollbar root element */
.WasmScrollbar {
	background-color: var(--ScrollbarBackground);
	border-radius: 0;
	position: absolute;
}

/* Scrollbar innerbar element (contains the thumb) */
.WasmInnerbar {
	border: 0;
}

/* Scrollbar thumb element */
.WasmThumb {
	border-radius: var(--BaseControlCornerRadius);
	border: 0;
	background: var(--ScrollbarThumb);
	position: relative;
}
.WasmThumb:hover { background: var(--ScrollbarThumbHover); }
.WasmThumb:active { background: var(--ScrollbarThumbActive); }

/* Scrollbar scroll/arrow button element */
.WasmScrollButton {
	border-radius: var(--BaseControlCornerRadius);
	border: 0;
	flex-grow: 0;
	flex-shrink: 0;
	background: var(--ScrollbarButton);
	background-position: center;
	background-size: 8px 8px;
	background-repeat: no-repeat;
}
.WasmScrollButton:hover { background-color: var(--ScrollbarButtonHover); }
.WasmScrollButton:active { background-color: var(--ScrollbarButtonActive); }

/* Scrollbar scroll button icon  */
.WasmScrollArrowUp { background-image: var(--ScrollbarArrowUp); }
.WasmScrollArrowDown { background-image: var(--ScrollbarArrowDown); }
.WasmScrollArrowLeft { background-image: var(--ScrollbarArrowLeft); }
.WasmScrollArrowRight { background-image: var(--ScrollbarArrowRight); }

/* Scrollbar root element for overlay style (DrawGo) */
.WasmScrollbar[overlay] {
	--ScrollbarBackground: white;
	--ScrollbarThumb: rgba(0, 0, 0, 0.3);
	--ScrollbarThumbOutline: rgba(255, 255, 255, 0.6);
	--ScrollbarThumbHover: var(--ScrollbarThumb);
	--ScrollbarThumbActive: var(--ScrollbarThumb);
	--ScrollbarThumbSize: 6px;
	--ScrollbarThumbOffset: 5px;

	transition: opacity 0.1s;
}

/* Scrollbar thumb element for overlay style (DrawGo) */
.WasmThumb[overlay] {
	outline: 0.25px solid var(--ScrollbarThumbOutline);
}

/* Scrollbar thumb element for overlay style (DrawGo)
 * when the mouse is hovering over it */
.WasmThumb[overlay]:hover {
	--ScrollbarThumbSize: 8px;
	--ScrollbarThumbOffset: 4px;
}

/* Scrollbar thumb element for overlay style (DrawGo)
 * when the mouse is not held. This prevents animating
 * the thumb when the user is dragging it. */
.WasmThumb[overlay]:not(:active) {
	transition: all 0.1s;
}

/* Scrollbar button element for overlay style (DrawGo) */
.WasmScrollButton[overlay] {
	display: none;
}

.WasmToggle {
	--TrackBackgroundChecked: var(--ToggleButtonCheckedFill);
	--TrackBackgroundCheckedHover: var(--ToggleButtonCheckedHotFill);
	--TrackBackgroundUnchecked: var(--ToggleButtonFill);
	--TrackBackgroundUncheckedHover: var(--ToggleButtonHotFill);
	--TrackBackgroundDisabled: var(--BaseControlDisabledFill);
	--HandleBackground: var(--ToggleButtonHandleFill);
	--IndeterminateSymbolBackground: var(--ToggleButtonGlyphNormal);
	--IndeterminateSymbolBackgroundDisabled: var(--ToggleButtonGlyphDisabled);

	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 999px;
	box-shadow: 0 0.5px 2px inset var(--BoxShadow);
	transition: 0.1s ease-in-out;
}

.WasmToggle input {
	display: none;
}

.WasmToggle input:not(:checked) + .WasmToggleHandle {
	left: 0;
}

.WasmToggle input:checked + .WasmToggleHandle {
	left: 50%;
}

.WasmToggle input:indeterminate + .WasmToggleHandle {
	left: 25%;
}

.WasmToggle:has(input:checked:enabled),
.WasmToggle:has(input:indeterminate:enabled) {
	background-color: var(--TrackBackgroundChecked);
}

.WasmToggle:has(input:checked:enabled):hover,
.WasmToggle:has(input:checked:enabled):focus,
.WasmToggle:has(input:indeterminate:enabled):hover,
.WasmToggle:has(input:indeterminate:enabled):focus {
	background-color: var(--TrackBackgroundCheckedHover);
}

.WasmToggle:has(input:not(:checked):not(:indeterminate):enabled) {
	background-color: var(--TrackBackgroundUnchecked);
}

.WasmToggle:has(input:not(:checked):not(:indeterminate):enabled):hover,
.WasmToggle:has(input:not(:checked):not(:indeterminate):enabled):focus {
	background-color: var(--TrackBackgroundUncheckedHover);
}

.WasmToggle:has(input:disabled) {
	background-color: var(--TrackBackgroundDisabled);
}

/* Border colors for handle are same as track background.
 * Border is used for a padding effect, since padding can have uneven look at non-1:1 DPIs. */
.WasmToggle:has(input:checked:enabled) .WasmToggleHandle,
.WasmToggle:has(input:indeterminate:enabled) .WasmToggleHandle {
	border-color: var(--TrackBackgroundChecked);
}

.WasmToggle:has(input:checked:enabled):hover .WasmToggleHandle,
.WasmToggle:has(input:checked:enabled):focus .WasmToggleHandle,
.WasmToggle:has(input:indeterminate:enabled):hover .WasmToggleHandle,
.WasmToggle:has(input:indeterminate:enabled):focus .WasmToggleHandle {
	border-color: var(--TrackBackgroundCheckedHover);
}

.WasmToggle:has(input:not(:checked):not(:indeterminate):enabled) .WasmToggleHandle {
	border-color: var(--TrackBackgroundUnchecked);
}

.WasmToggle:has(input:not(:checked):not(:indeterminate):enabled):hover .WasmToggleHandle,
.WasmToggle:has(input:not(:checked):not(:indeterminate):enabled):focus .WasmToggleHandle {
	border-color: var(--TrackBackgroundUncheckedHover);
}

.WasmToggle:has(input:disabled) .WasmToggleHandle {
	border-color: var(--TrackBackgroundDisabled);
}

.WasmToggleHandle {
	position: absolute;
	display: flex;
	box-sizing: border-box;
	border: 1px solid;
	width: 50%;
	height: 100%;
	border-radius: 50%;
	background-color: var(--HandleBackground);
	box-shadow: 0 0.5px 2px var(--BoxShadow);
	justify-content: center;
	transition: 0.1s ease-in-out;
}

.WasmToggle .WasmToggleHandle::after {
	display: block;
	align-self: center;
	width: 8px;
	height: 2px;
	border-radius: 20px;
	background-color: var(--IndeterminateSymbolBackground);
	content: '';
	transition: 0.1s ease-in-out;
	opacity: 0;
}

.WasmToggle:has(input:indeterminate) .WasmToggleHandle::after {
	opacity: 1;
}

.WasmToggle:has(input:indeterminate:disabled) .WasmToggleHandle::after {
	background-color: var(--IndeterminateSymbolBackgroundDisabled);
}