/* ───────────────────────────────────────────────── */
/** Notice
──────────────────────────────────────────────────── */
.notice-container {
	--notice-spacing: 10px;
	padding: var(--notice-spacing);
	top: 0;
}

.notices-at-bottom-right .notice-container {
	bottom: calc(var(--status-bar-font-size) + var(--notice-spacing));
	top: unset;
	/* also reverse order of notices, stacking from bottom to top */
	display: flex;
	flex-direction: column-reverse;
}

.notice {
	min-width: 10rem;
	padding: 6px 12px;
	margin-bottom: 6px;
	font-size: var(--font-small);
	line-height: 1.3;
	border: 3px ridge var(--basic-border-color);
	color: var(--interactive-normal);
	background-color: var(--color-base-100);

	&.mod-success {
		background-color: var(--text-success);
		color: hsl(0 0% 0%);
	}

	&.mod-error {
		background-color: var(--text-error);
		color: hsl(0 0% 100%);
	}

	&:hover {
		opacity: 0.7;
	}
}

/* ───────────────────────────────────────────────── */
/** Input & Dropdowns & Sliders
──────────────────────────────────────────────────── */

input[type]:focus,
select:focus {
	border-color: var(--color-accent);
	box-shadow: none;
}

input[type]:hover,
select:hover {
	border-color: var(--hover-accent);
	box-shadow: none;
}

.dropdown {
	border: 1px solid transparent;
}

.dropdown:focus {
	border-color: var(--color-accent);
	box-shadow: none;
}

.dropdown:hover {
	border-color: var(--hover-accent);
	box-shadow: none;
}

input[type="text"][type]:not(.metadata-input, .metadata-property-key-input) {
	background-color: var(--bg1);
}

input[type="range"] {
	align-items: center;
	min-width: 150px;
}

input[type="range"]::before,
input[type="range"]::after {
	display: block;
	padding: 2px;
	font-size: var(--font-ui-smaller);
	color: var(--text-muted);
	background-color: inherit;
	border: var(--thin-border);
	border-radius: var(--radius-s);
}

input[type="range"]::before {
	content: attr(min);
}

input[type="range"]::after {
	content: attr(max);
	max-width: 3em; /* FIX Canvas settings having a max value with a lot of decimals */
}

body:not(.show-close-buttons, .is-mobile) .search-input-clear-button {
	display: none;
}

/* ───────────────────────────────────────────────── */
/** Context Menu (Right-click)
──────────────────────────────────────────────────── */
.menu {
	padding: 3px;
}

.menu .menu-separator {
	border-width: 2px;
}
