@property --w_raw {
	syntax: '<length>';
	inherits: true;
	initial-value: 100vw;
}
  
@property --h_raw {
	syntax: '<length>';
	inherits: true;
	initial-value: 100vh;
}

:root {
	--w: tan(atan2(var(--w_raw), 1px));
  	--h: tan(atan2(var(--h_raw), 1px));
	--img-wrap-object-fit: cover;
	--carousel-thumb-cols: 1;
	--offcanvas-width: 60%;
	--bs-primary-hover: color-mix(in hsl, var(--bs-primary), white 30%);
	--bs-body-line-height: 1.6;
}
::placeholder {
    opacity: .5 !important;
    font-size: 14px;
}

/* Utilities */
.bg-none {
	background: none;
}

/* Loading */
button.loading,
button[aria-busy="true"] {
	display: inline-flex;
    justify-content: center;
    align-items: center;
	pointer-events: none;
	opacity: .5;
	gap: 8px;
}
button.loading:before,
button[aria-busy="true"]:before {
	content: '';
	position: relative;
	--bs-spinner-width: 1.2rem;
	--bs-spinner-height: 1.2rem;
	--bs-spinner-vertical-align: -0.125em;
	--bs-spinner-border-width: 0.25em;
	--bs-spinner-animation-speed: 0.75s;
	--bs-spinner-animation-name: spinner-border;
	border: var(--bs-spinner-border-width) solid currentcolor;
	border-right-color: transparent;
	display: inline-block;
	width: var(--bs-spinner-width);
	height: var(--bs-spinner-height);
	vertical-align: var(--bs-spinner-vertical-align);
	border-radius: 50%;
	animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
}
button.btn-sm.loading:before,
button[aria-busy="true"].btn-sm:before {
	--bs-spinner-width: 1rem;
	--bs-spinner-height: 1rem;
	--bs-spinner-border-width: 0.2em;
	margin: 2.5px 0;
}

/* Buttons with only an icon should replace the content completely with the loading */
button:not(:empty):has(> i:only-child).loading i, button:not(:empty):has(> svg:only-child).loading svg,
button:not(:empty):has(> i:only-child)[aria-busy="true"] i, button:not(:empty):has(> svg:only-child)[aria-busy="true"] svg {
    display: none;
}
button:not(:empty):has(> i:only-child).loading:before, button:not(:empty):has(> svg:only-child).loading:before,
button:not(:empty):has(> i:only-child)[aria-busy="true"]:before, button:not(:empty):has(> svg:only-child)[aria-busy="true"]:before {
	margin-right: 0;
	align-self: center;
}

[aria-busy="true"]:not(button) {
    position: relative;
}

[aria-busy="true"]:not(button)::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.7);
    transition: opacity 0.2s;
    z-index: 901;
}

[aria-busy="true"]:not(button)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rem;
    height: 2rem;
    z-index: 902;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236c757d' d='M8 16c-2.1 0-4.1-.8-5.7-2.3C.8 12.1 0 10.1 0 8c0-2.1.8-4.1 2.3-5.7C3.9.8 5.9 0 8 0v2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6h2c0 2.1-.8 4.1-2.3 5.7C12.1 15.2 10.1 16 8 16z'/%3E%3C/svg%3E") center/contain no-repeat;
    animation: _spin 1s linear infinite;
}

@keyframes _spin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

[data-countdown]:not([data-countdown="0"]) {
	pointer-events: none;
}
[data-countdown]:not([data-countdown="0"]):after {
	content: ' (' attr(data-countdown) ')';
}

dialog:has(.confirm-content) {
    max-width: 350px !important;
}

.text-info {
    --bs-info: rgb(31, 122, 189);
    --bs-info-hover: color-mix(in hsl, var(--bs-info), white 30%);
}