/* Setup color variables */
:root {
	/* Shades */
	--s-0: 0%;
	--s-10: 10%;
	--s-20: 20%;
	--s-30: 30%;
	--s-40: 40%;
	--s-50: 50%;
	--s-60: 60%;
	--s-70: 70%;
	--s-80: 80%;
	--s-90: 90%;
	--s-100: 100%;

	/* Black shades */
	--black: var(--black-100);
	--black-0: hsl(0, 0%, var(--s-100));
	--black-10: hsl(0, 0%, var(--s-90));
	--black-20: hsl(0, 0%, var(--s-80));
	--black-30: hsl(0, 0%, var(--s-70));
	--black-40: hsl(0, 0%, var(--s-60));
	--black-50: hsl(0, 0%, var(--s-50));
	--black-60: hsl(0, 0%, var(--s-40));
	--black-70: hsl(0, 0%, var(--s-30));
	--black-80: hsl(0, 0%, var(--s-20));
	--black-90: hsl(0, 0%, var(--s-10));
	--black-100: hsl(0, 0%, var(--s-0));

	/* White shades */
	--white: var(--white-100);
	--white-0: hsl(0, 0%, var(--s-0));
	--white-10: hsl(0, 0%, var(--s-10));
	--white-20: hsl(0, 0%, var(--s-20));
	--white-30: hsl(0, 0%, var(--s-30));
	--white-40: hsl(0, 0%, var(--s-40));
	--white-50: hsl(0, 0%, var(--s-50));
	--white-60: hsl(0, 0%, var(--s-60));
	--white-70: hsl(0, 0%, var(--s-70));
	--white-80: hsl(0, 0%, var(--s-80));
	--white-90: hsl(0, 0%, var(--s-90));
	--white-100: hsl(0, 0%, var(--s-100));

	/* Colors and highlighting */
	/* System colors */
	--background-light: var(--white);
	--background: var(--white-90);
	--background-dark: var(--white-80);

	/* Success */
	--success-hue: 140;
	--success: var(--success-50);
	--success-10: hsl(var(--success-hue), 100%, var(--s-10));
	--success-20: hsl(var(--success-hue), 100%, var(--s-20));
	--success-30: hsl(var(--success-hue), 100%, var(--s-30));
	--success-40: hsl(var(--success-hue), 100%, var(--s-40));
	--success-50: hsl(var(--success-hue), 100%, var(--s-50));
	--success-60: hsl(var(--success-hue), 100%, var(--s-60));
	--success-70: hsl(var(--success-hue), 100%, var(--s-70));
	--success-80: hsl(var(--success-hue), 100%, var(--s-80));
	--success-90: hsl(var(--success-hue), 100%, var(--s-90));
	--success-100: hsl(var(--success-hue), 100%, var(--s-100));

	/* Information */
	--info-hue: 200;
	--info: var(--info-50);
	--info-10: hsl(var(--info-hue), 100%, var(--s-10));
	--info-20: hsl(var(--info-hue), 100%, var(--s-20));
	--info-30: hsl(var(--info-hue), 100%, var(--s-30));
	--info-40: hsl(var(--info-hue), 100%, var(--s-40));
	--info-50: hsl(var(--info-hue), 100%, var(--s-50));
	--info-60: hsl(var(--info-hue), 100%, var(--s-60));
	--info-70: hsl(var(--info-hue), 100%, var(--s-70));
	--info-80: hsl(var(--info-hue), 100%, var(--s-80));
	--info-90: hsl(var(--info-hue), 100%, var(--s-90));
	--info-100: hsl(var(--info-hue), 100%, var(--s-100));

	/* Warning */
	--warning-hue: 40;
	--warning: var(--warning-50);
	--warning-10: hsl(var(--warning-hue), 100%, var(--s-10));
	--warning-20: hsl(var(--warning-hue), 100%, var(--s-20));
	--warning-30: hsl(var(--warning-hue), 100%, var(--s-30));
	--warning-40: hsl(var(--warning-hue), 100%, var(--s-40));
	--warning-50: hsl(var(--warning-hue), 100%, var(--s-50));
	--warning-60: hsl(var(--warning-hue), 100%, var(--s-60));
	--warning-70: hsl(var(--warning-hue), 100%, var(--s-70));
	--warning-80: hsl(var(--warning-hue), 100%, var(--s-80));
	--warning-90: hsl(var(--warning-hue), 100%, var(--s-90));
	--warning-100: hsl(var(--warning-hue), 100%, var(--s-100));

	/* Error */
	--error-hue: 10;
	--error: var(--error-50);
	--error-10: hsl(var(--error-hue), 100%, var(--s-10));
	--error-20: hsl(var(--error-hue), 100%, var(--s-20));
	--error-30: hsl(var(--error-hue), 100%, var(--s-30));
	--error-40: hsl(var(--error-hue), 100%, var(--s-40));
	--error-50: hsl(var(--error-hue), 100%, var(--s-50));
	--error-60: hsl(var(--error-hue), 100%, var(--s-60));
	--error-70: hsl(var(--error-hue), 100%, var(--s-70));
	--error-80: hsl(var(--error-hue), 100%, var(--s-80));
	--error-90: hsl(var(--error-hue), 100%, var(--s-90));
	--error-100: hsl(var(--error-hue), 100%, var(--s-100));

	/* Brand colors */
	--primary-hue: 190;
	--primary: var(--primary-50);
	--primary-10: hsl(var(--primary-hue), 100%, var(--s-10));
	--primary-20: hsl(var(--primary-hue), 100%, var(--s-20));
	--primary-30: hsl(var(--primary-hue), 100%, var(--s-30));
	--primary-40: hsl(var(--primary-hue), 100%, var(--s-40));
	--primary-50: hsl(var(--primary-hue), 100%, var(--s-50));
	--primary-60: hsl(var(--primary-hue), 100%, var(--s-60));
	--primary-70: hsl(var(--primary-hue), 100%, var(--s-70));
	--primary-80: hsl(var(--primary-hue), 100%, var(--s-80));
	--primary-90: hsl(var(--primary-hue), 100%, var(--s-90));
	--primary-100: hsl(var(--primary-hue), 100%, var(--s-100));

	/* Accent color */
	--accent-hue: 160;
	--accent: var(--accent-50);
	--accent-10: hsl(var(--accent-hue), 100%, var(--s-10));
	--accent-20: hsl(var(--accent-hue), 100%, var(--s-20));
	--accent-30: hsl(var(--accent-hue), 100%, var(--s-30));
	--accent-40: hsl(var(--accent-hue), 100%, var(--s-40));
	--accent-50: hsl(var(--accent-hue), 100%, var(--s-50));
	--accent-60: hsl(var(--accent-hue), 100%, var(--s-60));
	--accent-70: hsl(var(--accent-hue), 100%, var(--s-70));
	--accent-80: hsl(var(--accent-hue), 100%, var(--s-80));
	--accent-90: hsl(var(--accent-hue), 100%, var(--s-90));
	--accent-100: hsl(var(--accent-hue), 100%, var(--s-100));

	/* Text colors */
	--text: var(--black-80);
	--text-secondary: var(--black-40);
	--text-button: var(--white-100);

	/* Text highlighting colors */
	--highlight-primary: var(--primary);
	--highlight-accent: var(--accent);
	--highlight-secondary: var(--text-secondary);

    /* Transitions and animations */
    --transition-duration: .3s;

    /* Borders and radius */
    --edge: 0;
    
    --circle: 200px;
    
    --rounded-s: 5px;
    --rounded-m: 8px;
    --rounded-l: 12px;
}

/* Setup toasts */
.toast {
	min-width: 20rem;
	width: auto;
	max-width: 30rem;
	height: 3rem;
	overflow: hidden;
	border-radius: var(--rounded-m);
	border-left: 5px solid var(--background-dark);
	display: flex;
	align-items: center;
	justify-content: start;
	gap: 1rem;
	background-color: var(--background-light);
	z-index: 10000000;
}

.toast-primary {
	border-left: 5px solid var(--primary-50) !important;
	background-color: var(--primary-90);
}

.toast-accent {
	border-left: 5px solid var(--accent-50) !important;
	background-color: var(--accent-90);
}

.toast-info {
	border-left: 5px solid var(--info-50) !important;
	background-color: var(--info-90);
}

.toast-success {
	border-left: 5px solid var(--success-50) !important;
	background-color: var(--success-90);
}

.toast-warning {
	border-left: 5px solid var(--warning-50) !important;
	background-color: var(--warning-90);
}

.toast-error {
	border-left: 5px solid var(--error-50) !important;
	background-color: var(--error-90);
}

/* Toast positions */
.toast-left-top {
	position: absolute;
	top: 1rem;
	left: 1rem;
}

.toast-left-bottom {
	position: absolute;
	bottom: 1rem;
	left: 1rem;
}

.toast-right-top {
	position: absolute;
	top: 1rem;
	right: 1rem;
}

.toast-right-bottom {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
}

.toast-right-center {
	position: absolute;
	top: calc(50% - 3rem);
	right: 1rem;
}

.toast-left-center {
	position: absolute;
	top: calc(50% - 3rem);
	left: 1rem;
}

/* Toast icons */
.toast .toast-icon {
	position: relative;
	margin-left: 1rem;
	font-size: 22px;
}

.toast-primary > .toast-icon {
	color: var(--primary-50);
}
.toast-accent > .toast-icon {
	color: var(--accent-50);
}
.toast-info > .toast-icon {
	color: var(--info-50);
}
.toast-success > .toast-icon {
	color: var(--success-50);
}
.toast-warning > .toast-icon {
	color: var(--warning-50);
}
.toast-error > .toast-icon {
	color: var(--error-50);
}

/* Toast text */
.toast .toast-text {
	position: relative;
    margin-left: 1rem;
	font-weight: 600;
    max-width: calc(100% - 2rem);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}