/*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(--PrimarySurface);
	--ScrollbarThumb: var(--GlyphDisabled);
	--ScrollbarThumbSize: 6px;
	--ScrollbarThumbHover: var(--ScrollbarThumb);
	--ScrollbarThumbActive: var(--ScrollbarThumb);
	--ScrollbarThumbOffset: 5px;
	--ScrollbarThumbCornerRadius: 999px;
	--ScrollbarButton: var(--ScrollbarBackground);
	--ScrollbarButtonSize: 16px;
	--ScrollbarButtonHover: transparent;
	--ScrollbarButtonActive: transparent;
	--ScrollbarArrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' width='8' height='5' style='fill:%23374151'><path d='m7.4 4.9c0.1-0.2 0.1-0.6 0-0.8l-3.4-3.3-3.4 3.3c-0.1 0.2-0.1 0.6 0 0.8 0.2 0.1 0.6 0.1 0.8 0l2.6-2.7 2.6 2.7c0.2 0.1 0.6 0.1 0.8 0z'/></svg>");
}

@media (prefers-color-scheme: dark) {
	:root {
		--ScrollbarArrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 6' width='8' height='5' style='fill:white'><path d='m7.4 4.9c0.1-0.2 0.1-0.6 0-0.8l-3.4-3.3-3.4 3.3c-0.1 0.2-0.1 0.6 0 0.8 0.2 0.1 0.6 0.1 0.8 0l2.6-2.7 2.6 2.7c0.2 0.1 0.6 0.1 0.8 0z'/></svg>");
	}
}

html {
	overscroll-behavior: none;
}

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

/* 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(--PrimaryPushButtonTextColor);
	border-color: var(--PrimaryPushButtonFill);
	background-color: var(--PrimaryPushButtonFill);
}

input[type="button"].WasmButtonPrimary:hover:enabled,
input[type="button"].WasmButtonPrimary:active:enabled {
	color: var(--PrimaryPushButtonHotTextColor);
	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;
}

.WasmFrameWindow > canvas {
	/* This forces a new compositing layer to be created, which fixes issue on Firefox where canvas
	elements with 'border-radius: inherit' or that are clipped by a parent with border-radius
	sometimes has jagged edges. */
	transform: translateZ(0);
}

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

/* 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;
	transition: opacity 0.1s;
}

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

/* Scrollbar thumb element */
.WasmThumb {
	border-radius: var(--ScrollbarThumbCornerRadius);
	border: 0;
	background: var(--ScrollbarThumb);
	position: relative;
}
.WasmThumb:hover {
	--ScrollbarThumbSize: 8px;
	--ScrollbarThumbOffset: 4px;

	background: var(--ScrollbarThumbHover);
}
.WasmThumb:active { background: var(--ScrollbarThumbActive); }

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

/* 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;
	background-image: var(--ScrollbarArrow);
}
.WasmScrollButton:hover { background-color: var(--ScrollbarButtonHover); }
.WasmScrollButton:active { background-color: var(--ScrollbarButtonActive); }

/* Scrollbar scroll button icon  */
.WasmScrollArrowUp { transform: rotate(0deg); }
.WasmScrollArrowDown { transform: rotate(180deg); }
.WasmScrollArrowLeft { transform: rotate(270deg); }
.WasmScrollArrowRight { transform: rotate(90deg); }

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

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

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