:root {
	--ui-widgets-transition: 0.2s ease;
	--ui-widgets-toggle-height: 32px;
	--ui-widgets-outline: Highlight;
}

/* Remove input number type arrows */
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

/* Alternative to tachyons clip class, ensures input occupies same area in a relative container */
.hidden-input {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	pointer-events: none;
}

/* Add space for a scrollbar, requires overflow rules */
.scrollbar-gutter-stable {
	scrollbar-gutter: stable;
}

.bg-canvas {
	background-color: Canvas
}

.pe-none {
	pointer-events: none;
}

.us-none {
	user-select: none;
}

.resize-none {
	resize: none;
}

.hidden {
	visibility: hidden;
}

.cursor-default {
	cursor: default;
}

.cursor-text {
	cursor: text;
}

/* +4px for input native horizontal padding */
.mw-yyyy {
	max-width: calc(4.2ch + 4px);
}

.mw-yy {
	max-width: calc(2.7ch + 4px);
}

.mw-mm {
	max-width: calc(2.8ch + 4px);
}

.mw-dd {
	max-width: calc(2.3ch + 4px);
}

.mw-tt {
	max-width: calc(2ch + 4px);
}

.mw-001px {
	max-width: 0.01px
}

.minw-65rem {
	min-width: 0.65rem;
}

.h-05ch {
	height: 0.5ch;
}

.max-h-thumb {
	max-height: 6rem;
}

.max-h-img {
	max-height: 16rem;
}

.ph-2px {
	padding-left: 2px;
	padding-right: 2px;
}

.pv-1px {
	padding-top: 1px;
	padding-bottom: 1px;
}

.mr-2px {
	margin-right: 2px;
}

.f-07em {
	font-size: 0.7em;
}

.translate-up-100 {
	transform: translateY(-100%);
}

.transition-opts {
	transition: max-width 0.3s ease-in-out;
}

.toggle-outer {
	--ui-widgets-toggle-width: calc(var(--ui-widgets-toggle-height) * 2);
	width: var(--ui-widgets-toggle-width);
	height: var(--ui-widgets-toggle-height);
}

.toggle-inner {
	--ui-widgets-toggle-spacing: calc(var(--ui-widgets-toggle-height) / 8);
	--ui-widgets-toggle-inner: calc(var(--ui-widgets-toggle-height) - 2 * var(--ui-widgets-toggle-spacing));
	font-size: calc(var(--ui-widgets-toggle-height) / 2);
	line-height: var(--ui-widgets-toggle-inner);
	width: var(--ui-widgets-toggle-inner);
	height: var(--ui-widgets-toggle-inner);
	top: var(--ui-widgets-toggle-spacing);
	left: var(--ui-widgets-toggle-spacing);
}

.toggle-on {
	transform: translateX(var(--ui-widgets-toggle-height));
}

/* Firefox */
input[type=number] {
	-moz-appearance: textfield;
}

.screenreader {
	position: absolute !important;
	/* Outside the DOM flow */
	height: 1px;
	width: 1px;
	/* Nearly collapsed */
	overflow: hidden;
	clip: rect(1px 1px 1px 1px);
	/* IE 7+ only support clip without commas */
	clip: rect(1px, 1px, 1px, 1px);
	/* All other browsers */
}

.transition-mw {
	transition: max-width var(--ui-widgets-transition);
}

.transition-transform {
	transition: transform var(--ui-widgets-transition);
}

.transition-f {
	transition: font-size var(--ui-widgets-transition);
}

.transition-o {
	transition: opacity var(--ui-widgets-transition);
}

.transition-bg {
	transition: background-color var(--ui-widgets-transition);
}

.hide-child:focus .child {
	opacity: 1;
	transition: opacity .15s ease-in;
}

.ui-widgets-option[aria-activedescendant=true] {
	outline: var(--ui-widgets-outline) solid 2px;
}