/*Widget system-related CSS*/

/* #region | Button */

.mzButton {
	font: inherit;
	border: none;
	cursor: pointer;
	display: flex;
	place-items: center;
	text-decoration: none;
	width: fit-content;
	position: relative;
	overflow: hidden;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.mzButton.mzRounded {
	border-radius: 4px;
}

.mzButton.mzDisabled {
	cursor: default;
	pointer-events: none;
	opacity: 0.6;
}

.mzButton.mzDisabled.mzNoDim {
	opacity: 1;
}

.mzButtonBackdrop {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	transition: background-color 100ms cubic-bezier(0.66, -0.2, 0.27, 1.15);
}

.mzButtonBackdrop.slowTransition {
	transition: background-color 300ms cubic-bezier(0.66, -0.2, 0.27, 1.15);
}

.mzButtonText {
	position: relative;
	text-wrap-mode: nowrap;
}

.mzButtonSvg {
	position: relative;
}

.mzButton :where(svg, img, span, div) {
	pointer-events: none;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
}

.mzButton.mzLighten:hover>.mzButtonBackdrop {
	background-color: rgba(200, 200, 200, 0.3);
}

.mzButton.mzLightenMore:hover>.mzButtonBackdrop {
	background-color: rgba(200, 200, 200, 0.65);
}

.mzButton.mzDarken:hover>.mzButtonBackdrop {
	background-color: rgba(0, 0, 0, 0.1);
}

.mzButton:focus {
	outline: none;
}

.mzButton.mzLighten:active>.mzButtonBackdrop {
	background-color: rgba(200, 200, 200, 0.5);
}

.mzButton.mzLightenMore:active>.mzButtonBackdrop {
	background-color: rgba(200, 200, 200, 0.87);
}

.mzButton.mzDarken:active>.mzButtonBackdrop {
	background-color: rgba(0, 0, 0, 0.3);
}

.mzButton.mzDisabled>.mzButtonBackdrop {
	background-color: transparent !important;
}

.mzButton.mzReset>.mzButtonBackdrop {
	background-color: transparent !important;
}

.mzButton.mzLighten:focus-visible {
	box-shadow:
		0 0 0 0px transparent,
		0 0 0 1px #eee,
		0 0 0 0px transparent;
}

.mzButton.mzDarken:focus-visible {
	box-shadow:
		0 0 0 0px transparent,
		0 0 0 1px #333,
		0 0 0 0px transparent;
}

.mzButton.mzLighten>.mzButtonSvg.mzStroke {
	fill: none;
	stroke: #fff;
}

.mzButton.mzLighten>.mzButtonSvg.mzFill {
	fill: #fff;
	stroke: none
}

.mzButton.mzLighten>.mzButtonSvg.mzStroke>:where(path, rect, g) {
	stroke: #fff;
}

.mzButton.mzLighten>.mzButtonSvg.mzFill>:where(path, rect, g) {
	fill: #fff;
}

.mzButton.mzLighten>.mzButtonSvg>.mzStroke:where(path, rect, g) {
	stroke: #fff;
}

.mzButton.mzLighten>.mzButtonSvg>.mzFill:where(path, rect, g) {
	fill: #fff;
}

.mzButton.mzDarken>.mzButtonSvg.mzStroke>:where(path, rect, g) {
	stroke: var(--mzColorCharcoal);
}

.mzButton.mzDarken>.mzButtonSvg.mzFill>:where(path, rect, g) {
	fill: var(--mzColorCharcoal);
}

.mzButton.mzDarken>.mzButtonSvg>.mzStroke:where(path, rect, g) {
	stroke: var(--mzColorCharcoal);
}

.mzButton.mzDarken>.mzButtonSvg>.mzFill:where(path, rect, g) {
	fill: var(--mzColorCharcoal);
}

/* #endregion | Button */

/* #region | EditBox */

.mzEditBox {
	height: 32px;
	display: flex;
	flex-direction: row;
	background-color: var(--mzColorPrimaryTint);
	border-radius: 4px;
	overflow: hidden;
}

.mzEditBoxInput {
	height: 100%;
	width: 100%;
	flex: 1 1;
	background-color: var(--mzColorPrimaryTint);
	background-color: transparent;
	border: none;
	padding: 4px;
	font-family: var(--mzFonts);
	font-size: var(--mzFontsizeBase);
}

.mzEditBoxInput.hidden {
	opacity: 0;
}

.mzEditBox:has(.mzEditBoxInput:focus),
.mzEditBox:has(.mzEditBoxClear:hover) {
	background-color: #ffffff;
}

.mzEditBoxInput:focus {
	outline: none;
}

.mzEditBoxClear {
	max-width: 0px;
	background-color: var(--mzColorPrimaryTint);
	border-radius: 0px;
	padding: 0px;
	flex: 0 0 32px;
	max-width: 32px;
}

.mzPasswordHideShow {
	background-color: var(--mzColorPrimaryTint);
	border-radius: 0px;
}

.mzEditBoxInput:focus+.mzEditBoxClear {
	display: flex;
	max-width: 32px;
}

.mzEditBoxClear:hover {
	display: flex;
	max-width: unset;
}

.mzEditBoxClear>.mzButtonSvg {
	width: 16px;
	height: 16px;
	margin: 0px 8px 0px 8px;
}

.mzEditBoxClearInput {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	border: transparent 2px solid;
	background-color: transparent;
	outline: none;
	caret-color: transparent;
	cursor: pointer;
	opacity: 0;
}

.mzEditBoxDropdown,
.mzPasswordHideShow {
	background-color: var(--mzColorPrimaryTint);
	justify-content: center;
	flex: 1 1;
	max-width: 32px;
	border-left: 1px solid rgba(0, 0, 0, 0.1);
}

.mzEditBoxDropdown>.mzButtonSvg,
.mzPasswordHideShow>.mzButtonSvg {
	width: 18px;
	height: 18px;
	min-width: 18px;
	min-height: 18px;
}

.mzPopuplistOptions {
	height: 0px;
	width: 0px;
	opacity: 0;
	overflow: hidden;
}

.PasswordEditBoxButton {
	flex: 0 0 32px;
}

/* #endregion | EditBox */

/* #region | Checkbox */

.mzCheckBox,
.mzCheckBoxPlaceholder {
	position: relative;
	display: flex;
	flex-direction: row;
	-webkit-user-select: none;
	-webkit-user-drag: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	touch-action: manipulation;
}

.mzCheckBoxContainer {
	position: relative;
}

.mzCheckBoxContainer>label {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 4px;
	cursor: pointer;
	height: 28px;
	width: 28px;
	display: block;
}

.mzCheckBoxContainer>.mzRadioLabel {
	border-radius: 50%;
}

.mzCheckBoxContainer>label:after {
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	content: "";
	height: 6px;
	left: 8px;
	opacity: 0;
	position: absolute;
	top: 9px;
	transform: rotate(-45deg);
	width: 12px;
}

.mzCheckBoxContainer>input[type="checkbox"],
.mzCheckBoxContainer>input[type="radio"] {
	visibility: hidden;
	display: none;
	opacity: 0;
}

.mzCheckBoxContainer>input[type="checkbox"]:checked+label,
.mzCheckBoxContainer>input[type="radio"]:checked+label {
	background-color: hsl(140, 55%, 37%);
	border-color: hsl(140, 55%, 37%);
}

.mzCheckBoxContainer>input[type="checkbox"]:checked+label:after,
.mzCheckBoxContainer>input[type="radio"]:checked+label:after {
	opacity: 1;
}

.mzCheckBoxLabel {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.mzCheckBoxLabel>label {
	cursor: pointer;
}

.mzCheckBoxLabel:first-child {
	margin-right: 6px;
}

.mzCheckBoxLabel:last-child {
	margin-left: 6px;
}

/* #endregion | Checkbox */

.mzSvgGray {
	fill: var(--mzColorGray);
	stroke: var(--mzColorGray);
}

.mzSvgLight {
	fill: var(--mzColorLightGray);
	stroke: var(--mzColorLightGray);
}