.widget {
	--bs-text-opacity: 1;
	--bs-bg-opacity: 1;

	--bs-card-bg-rgb: var(--bs-body-bg-rgb);
	--bs-card-bg-opacity: var(--widget-bg-opacity);
	background-color: rgba(var(--bs-card-bg-rgb), var(--bs-card-bg-opacity)) !important;
}
.widget:not(.dragover):after { /* A filter changes the stacking order of the element, including its children, which is not suitable on the widget. Using the ::after pseudoelement prevent this */
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	-webkit-backdrop-filter: var(--widget-bg-filter);
	backdrop-filter: var(--widget-bg-filter);
	z-index: -1;
}

/* Required to get transparent widget */
:host > .card-body .form-control,
:host > .card-body .form-select {
	background-color: rgba(var(--bs-body-bg-rgb), var(--bs-card-bg-opacity));
}
:host > .card-body .list-group-item:not(.active):not(:hover),
:host > .card-body .input-group-text,
:host > .card-body .table > * > * > * {
	background-color: transparent !important;
}

.text-widget {
	color: rgba(var(--widget-color-rgb), var(--bs-text-opacity)) !important;
}

.bg-widget {
	background-color: rgba(var(--widget-color-rgb), var(--bs-bg-opacity)) !important;
}

.border-widget {
	border-color: rgba(var(--widget-color-rgb), 1) !important;
}

.btn-widget {
	color: white;
	background-color: rgba(var(--widget-color-rgb), var(--bs-bg-opacity)) !important;
	border-color: rgba(var(--widget-color-rgb), 1) !important;
}
.btn-widget:active,
.btn-widget:hover {
	color: white;
	background: linear-gradient(rgb(var(--bs-dark-rgb), .05), rgb(var(--bs-dark-rgb), .05)), linear-gradient(rgba(var(--widget-color-rgb), var(--bs-bg-opacity)), rgba(var(--widget-color-rgb), var(--bs-bg-opacity))) !important;
	background-color: rgba(var(--widget-color-rgb), var(--bs-bg-opacity)) !important;
}
.btn-widget:focus {
	color: white;
	box-shadow: 0 0 0 0.25rem rgb(var(--widget-color-rgb), .5);
}

.btn-outline-widget {
	color: rgba(var(--widget-color-rgb), var(--bs-text-opacity)) !important;
	border-color: rgba(var(--widget-color-rgb), 1) !important;
}
.btn-outline-widget:active,
.btn-outline-widget:hover {
	color: white !important;
	background-color: rgba(var(--widget-color-rgb), var(--bs-bg-opacity)) !important;
}
.btn-outline-widget:focus {
	box-shadow: 0 0 0 0.25rem rgb(var(--widget-color-rgb), .5);
}

.form-range-widget::-webkit-slider-thumb {
	background-color: var(--widget-color) !important;
}
.form-range-widget::-moz-range-thumb {
	background-color: var(--widget-color) !important;
}
.form-range-widget:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--widget-color-rgb), 0.25);
}
.form-range-widget:focus::-moz-range-thumb {
	box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(var(--widget-color-rgb), 0.25);
}

.bg-opacity-20 { --bs-bg-opacity: .2; }
.bg-opacity-30 { --bs-bg-opacity: .3; }
.bg-opacity-40 { --bs-bg-opacity: .4; }
.bg-opacity-60 { --bs-bg-opacity: .6; }
.bg-opacity-70 { --bs-bg-opacity: .7; }
.bg-opacity-80 { --bs-bg-opacity: .8; }
.bg-opacity-90 { --bs-bg-opacity: .9; }

.btn-close { /* Make the close buttons grey, in both light and dark mode, as it's not well styled inside a shadow root */
	--bs-btn-close-opacity: 1;
	filter: contrast(0);
}