@import "./ionic-normalize.css";
@import "./mapping.css";
@import "./typography.css";

:root {
	--smoothly-font-family: "usual", "Open Sans";
	background-color: rgb(var(--smoothly-background-color));
}

body {
	max-width: 100%;
	margin: 0 auto;
	min-height: 100vh;
}

[hidden] {
	display: none !important;
}

html {
	font-family: var(--smoothly-font-family);
}

mark {
	color: rgb(var(--smoothly-warning-contrast));
	background-color: rgb(var(--smoothly-warning-color));
}

*,
::before,
::after {
	box-sizing: border-box;
}

smoothly-notifier input,
smoothly-notifier button {
	color: unset;
	background-color: inherit;
	border-color: inherit;
}

smoothly-notifier a,
smoothly-notifier a:hover,
smoothly-notifier a:visited {
	color: inherit;
}

smoothly-notifier a:hover {
	cursor: pointer;
}

smoothly-notifier [color=default] {
	--smoothly-color: var(--smoothly-default-color);
	--smoothly-color-contrast: var(--smoothly-default-contrast);
	--smoothly-color-shade: var(--smoothly-default-shade);
	--smoothly-color-tint: var(--smoothly-default-tint);
}

smoothly-notifier [color=primary] {
	--smoothly-color: var(--smoothly-primary-color);
	--smoothly-color-contrast: var(--smoothly-primary-contrast);
	--smoothly-color-shade: var(--smoothly-primary-shade);
	--smoothly-color-tint: var(--smoothly-primary-shade);
}

smoothly-notifier [color=secondary] {
	--smoothly-color: var(--smoothly-secondary-color);
	--smoothly-color-contrast: var(--smoothly-secondary-contrast);
	--smoothly-color-shade: var(--smoothly-secondary-shade);
	--smoothly-color-tint: var(--smoothly-secondary-tint);
}

smoothly-notifier [color=tertiary] {
	--smoothly-color: var(--smoothly-tertiary-color);
	--smoothly-color-contrast: var(--smoothly-tertiary-contrast);
	--smoothly-color-shade: var(--smoothly-tertiary-shade);
	--smoothly-color-tint: var(--smoothly-tertiary-tint);
}

smoothly-notifier [color=success] {
	--smoothly-color: var(--smoothly-success-color);
	--smoothly-color-contrast: var(--smoothly-success-contrast);
	--smoothly-color-shade: var(--smoothly-success-shade);
	--smoothly-color-tint: var(--smoothly-success-tint);
}

smoothly-notifier [color=warning] {
	--smoothly-color: var(--smoothly-warning-color);
	--smoothly-color-contrast: var(--smoothly-warning-contrast);
	--smoothly-color-shade: var(--smoothly-warning-shade);
	--smoothly-color-tint: var(--smoothly-warning-tint);
}

smoothly-notifier [color=danger] {
	--smoothly-color: var(--smoothly-danger-color);
	--smoothly-color-contrast: var(--smoothly-danger-contrast);
	--smoothly-color-shade: var(--smoothly-danger-shade);
	--smoothly-color-tint: var(--smoothly-danger-tint);
}

smoothly-notifier [color=light] {
	--smoothly-color: var(--smoothly-light-color);
	--smoothly-color-contrast: var(--smoothly-light-contrast);
	--smoothly-color-shade: var(--smoothly-primary-shade);
	--smoothly-color-tint: var(--smoothly-light-tint);
}

smoothly-notifier [color=medium] {
	--smoothly-color: var(--smoothly-medium-color);
	--smoothly-color-contrast: var(--smoothly-medium-contrast);
	--smoothly-color-shade: var(--smoothly-medium-shade);
	--smoothly-color-tint: var(--smoothly-medium-tint);
}

smoothly-notifier [color=dark] {
	--smoothly-color: var(--smoothly-dark-color);
	--smoothly-color-contrast: var(--smoothly-dark-contrast);
	--smoothly-color-shade: var(--smoothly-dark-shade);
	--smoothly-color-tint: var(--smoothly-dark-tint);
}

html smoothly-notifier,
smoothly-notifier [color]:not([fill]),
smoothly-notifier [fill=default] {
	color: rgb(var(--smoothly-color-contrast));
	stroke: rgb(var(--smoothly-color-contrast));
	fill: rgb(var(--smoothly-color-contrast));
	background: rgb(var(--smoothly-color));
	border-color: transparent;
}

smoothly-notifier [fill=outline] {
	color: rgb(var(--smoothly-color));
	stroke: rgb(var(--smoothly-color));
	fill: rgb(var(--smoothly-color));
	background: transparent;
	border-color: rgb(var(--smoothly-color));
}

smoothly-notifier [fill=clear] {
	color: rgb(var(--smoothly-color));
	stroke: rgb(var(--smoothly-color));
	fill: rgb(var(--smoothly-color));
	background: transparent;
	border-color: transparent;
}

smoothly-notifier [fill=solid] {
	color: rgb(var(--smoothly-color-contrast));
	stroke: rgb(var(--smoothly-color-contrast));
	fill: rgb(var(--smoothly-color-contrast));
	background: rgb(var(--smoothly-color));
	border-color: rgb(var(--smoothly-color));
}

:root {
	--smoothly-semitransparent: .8;
	--smoothly-background-color: 246, 243, 240;
	--smoothly-default-color: 246, 243, 240;
	--smoothly-default-contrast: 46, 52, 54;
	--smoothly-default-shade: 220, 214, 208;
	--smoothly-default-tint: 255, 255, 255;

	--smoothly-primary-color: 159, 191, 41;
	--smoothly-primary-contrast: 45, 47, 36;
	--smoothly-primary-shade: 45, 47, 36;
	--smoothly-primary-tint: 203, 238, 77;

	--smoothly-secondary-color: 204, 175, 255;
	--smoothly-secondary-contrast: 45, 47, 36;
	--smoothly-secondary-shade: 74, 51, 137;
	--smoothly-secondary-tint: 228, 211, 255;

	--smoothly-tertiary-color: 117, 226, 206;
	--smoothly-tertiary-contrast: 45, 47, 36;
	--smoothly-tertiary-shade: 6, 87, 82;
	--smoothly-tertiary-tint: 196, 243, 236;

	--smoothly-success-color: 159, 191, 41;
	--smoothly-success-contrast: 45, 47, 36;
	--smoothly-success-shade: 45, 47, 36;
	--smoothly-success-tint: 203, 238, 77;

	--smoothly-warning-color: 255, 213, 123;
	--smoothly-warning-contrast: 45, 47, 36;
	--smoothly-warning-shade: 212, 115, 24;
	--smoothly-warning-tint: 255, 233, 177;

	--smoothly-danger-color: 245, 192, 176;
	--smoothly-danger-contrast: 45, 47, 36;
	--smoothly-danger-shade: 173, 39, 24;
	--smoothly-danger-tint: 250, 221, 212;

	--smoothly-dark-color: 50, 54, 46;
	--smoothly-dark-contrast: 255, 255, 255;
	--smoothly-dark-shade: 31, 33, 28;
	--smoothly-dark-tint: 90, 97, 83;

	--smoothly-medium-color: 85, 87, 83;
	--smoothly-medium-contrast: 255, 255, 255;
	--smoothly-medium-shade: 57, 58, 56;
	--smoothly-medium-tint: 118, 121, 115;

	--smoothly-light-color: 248, 249, 250;
	--smoothly-light-contrast: 45, 47, 36;
	--smoothly-light-shade: 219, 224, 229;
	--smoothly-light-tint: 255, 255, 255;

	--smoothly-color-contrast: 46, 52, 54;
	--smoothly-header-background: 45, 47, 36;
	--smoothly-shadow: 0 0 4px 2px rgba(var(--smoothly-default-contrast), 0.25);
	--smoothly-shadow-strong: 0 0 4px 4px rgba(var(--smoothly-dark-shade), 0.25);
	--table-width: 100%;
}

smoothly-notifier>.smoothly-notifier-wrapper {
	width: 100%;
	justify-content: center;
}

smoothly-spinner {
	--smoothly-color-contrast: var(--smoothly-primary-tint);
	--smoothly-color: var(--smoothly-background-color);
}

/* Panel that can be used for filters, create forms etc. */
.p2p-panel {
	position: relative;
	background-color: rgb(var(--smoothly-default-tint));
	border: 3px solid rgb(var(--smoothly-light-shade));
	border-radius: 0.25rem;
}
/* arrow */
.p2p-panel::before {
	content: "";
	position: absolute;
	top: 0;
	left: var(--p2p-panel-arrow-left);
	right: var(--p2p-panel-arrow-right);
	/* X=50% so left/right corresponds to middle of arrow (makes it easy to center arrow if needed) */
	transform: translate(50%, -0.65rem) rotate(45deg);
	width: 1rem;
	height: 1rem;
	background-color: rgb(var(--smoothly-default-tint));
	border-top: 3px solid rgb(var(--smoothly-light-shade));
	border-left: 3px solid rgb(var(--smoothly-light-shade));
}

/* Mobile */
@media (max-width: 47.999rem) {
	smoothly-table-expandable-row>.smoothly-table-detail::after {
		/* Hack: Hide detail sides to avoid weird overlap with detail content */
		content: unset !important;
	}
}