@use "bootstrap/scss/bootstrap" with (
	$color-mode-type: media-query
);

:root {
	--sv-min-height: 40px;
}

// Svelecte doesn't have a built in dark mode :)
@media (prefers-color-scheme: dark) {
	:root {
		--sv-bg: #32363f;
		--sv-disabled-bg: #eee;
		--sv-border: 1px solid #626262;
		--sv-item-selected-bg: #626262;
		--sv-item-btn-color: #ccc;
		--sv-item-btn-color-hover: #ccc;
		--sv-item-btn-bg: #626262;
		--sv-item-btn-bg-hover: #bc6063;
		--sv-icon-color: #bbb;
		--sv-icon-color-hover: #ccc;
		--sv-separator-bg: #626262;
		--sv-placeholder-color: #ccccd6;
		--sv-dropdown-bg: var(--sv-bg);
		--sv-dropdown-border: var(--sv-border);
		--sv-dropdown-shadow: 0 1px 3px #555;
		--sv-dropdown-active-bg: #553d3d;
		--sv-dropdown-selected-bg: #754545;
		--sv-create-kbd-border: 1px solid #626262;
		--sv-create-kbd-bg: #626262;
		--sv-create-disabled-bg: #fcbaba;
		--sv-loader-border: 2px solid #626262;
	}
}