/* VARIABLES
========================================================================
*/

:where(:root) {
	/* 0 - 4.5 */
	--s-multiplier-rounded: 1;
	/* 0.3 - 2 */
	--s-multiplier-sparsity: 1;
	/* 0 - 1 */
	--s-multiplier-fatness: 0;
	/* 0 - 2 */
	--s-multiplier-shadow: 1;

	--s-gap-default: calc(0.75rem + (0.25rem * var(--s-multiplier-sparsity)));

	--text-inline-padding-block: 0.125rem;
	--text-inline-padding-inline: 0.375rem;
	--s-line-height: 1.6;

	--s-focus-offset: 3px;
	--s-focus-offset-negative: -2px;

	--s-input-border-radius: calc(0.375rem * var(--s-multiplier-rounded));
	--s-checkbox-radius: calc(0.2rem + 0.05rem * var(--s-multiplier-rounded));
	--s-block-radius: calc(0.5rem * var(--s-multiplier-rounded));

	--s-input-padding-inline: calc(0.75rem + (1rem * var(--s-multiplier-rounded) / 10));
	--s-input-block-padding: 0.75rem;
	--s-tooltip-padding-inline: calc(0.75rem + (1rem * var(--s-multiplier-rounded) / 10));
	--s-tooltip-padding-block: calc(0.5rem + (1rem * var(--s-multiplier-rounded) / 10));

	--sugar-spacing-block: calc(2.5rem * var(--s-multiplier-sparsity));
	--sugar-base-spacing-inline: calc(0.25rem + (0.75rem * var(--s-multiplier-sparsity)));
	--sugar-spacing-inline: var(--sugar-base-spacing-inline);
	--sugar-spacing-list: 1rem;

	--container-width-number: 65;
	--container-width: calc(1rem * var(--container-width-number));

	--sugar-border-width: calc(1px + (1rem * var(--s-multiplier-fatness) / 5));
	--sugar-border-width-min: calc(1px + (1rem * var(--s-multiplier-fatness) / 10));
	--sugar-border-width-plus: calc(2px + (1rem * var(--s-multiplier-fatness) / 8));
	--s-border-width-max: calc(0.375rem + (1rem * var(--s-multiplier-fatness) / 2));
	--s-hr-height: calc(2px + (1rem * var(--s-multiplier-fatness)));

	--sugar-icon-invalid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='rgb(180, 40, 40)' d='M2.93 17.07A9.97 9.97 0 0 1-.123 9.877c0-5.523 4.477-10 10-10a9.968 9.968 0 0 1 7.19 3.05l.003.003a9.963 9.963 0 0 1 2.807 6.947c0 5.523-4.477 10-10 10-2.7 0-5.151-1.07-6.95-2.81l.003.003zm12.73-1.41A8.004 8.004 0 1 0 4.34 4.34a8.004 8.004 0 1 0 11.32 11.32zM9 5h2v6H9V5zm0 8h2v2H9v-2z'/%3E%3C/svg%3E");
	--sugar-icon-valid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='rgb(30, 130, 0)' d='M2.93 17.07A9.97 9.97 0 0 1-.123 9.877c0-5.523 4.477-10 10-10a9.968 9.968 0 0 1 7.19 3.05l.003.003a9.963 9.963 0 0 1 2.807 6.947c0 5.523-4.477 10-10 10-2.7 0-5.151-1.07-6.95-2.81l.003.003zm12.73-1.41A8.004 8.004 0 1 0 4.34 4.34a8.004 8.004 0 1 0 11.32 11.32zM6.7 9.29 9 11.6l4.3-4.3 1.4 1.42L9 14.4l-3.7-3.7 1.4-1.42z'/%3E%3C/svg%3E");
	--sugar-icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23aaaaaa' d='M12.9 14.32a7.947 7.947 0 0 1-4.908 1.682 8 8 0 1 1 6.305-3.075l.013-.018 5.35 5.33-1.42 1.42-5.33-5.34zM8 14A6 6 0 1 0 8 2a6 6 0 1 0 0 12z'/%3E%3C/svg%3E");
	--sugar-icon-date: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ffffff' d='M1 4c0-1.1.9-2 2-2h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V4zm2 2v12h14V6H3zm2-6h2v2H5V0zm8 0h2v2h-2V0zM5 9h2v2H5V9zm0 4h2v2H5v-2zm4-4h2v2H9V9zm0 4h2v2H9v-2zm4-4h2v2h-2V9zm0 4h2v2h-2v-2z'/%3E%3C/svg%3E");
	--sugar-icon-time: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ffffff' d='M10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 0 0 0-16 8 8 0 0 0 0 16zm-1-7.59V4h2v5.59l3.95 3.95-1.41 1.41L9 10.41z'/%3E%3C/svg%3E");
	--sugar-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='4'%3E%3Cpath fill='%23ffffff' d='M0 0h8L4 4'/%3E%3C/svg%3E");
	--sugar-icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath fill='%23ffffff' d='M10 8.586 2.929 1.515 1.515 2.929 8.586 10l-7.071 7.071 1.414 1.414L10 11.414l7.071 7.071 1.414-1.414L11.414 10l7.071-7.071-1.414-1.414L10 8.586z'/%3E%3C/svg%3E");

	--sugar-check-radio-size: 1.5rem;
	--sugar-check-radio-border-size: calc(var(--sugar-check-radio-size) / 3);

	--sugar-range-height: 0.375rem;
	--sugar-progress-height: 0.8rem;

	--sugar-nav-gap: 0.3rem 1rem;
}

@media screen and (min-width: 20rem) {
	:where(:root) {
		--sugar-spacing-inline: calc(
			var(--sugar-base-spacing-inline) +
				(1.5 * ((100vw - 20rem) / var(--container-width-number)) * var(--s-multiplier-sparsity))
		);
	}
}