  /****************************/
 /*     BACKGROUND-COLOR     */
/****************************/

/* PAGE */
.page-background {
    background-color: var(--page-background);
}

.surface-background {
    background-color: var(--surface-background);
    backdrop-filter: var(--backdrop-filter);
}

.backdrop {
    background-color: var(--backdrop);
}

/* NEUTRAL */
.neutral-background-weak,
.neutral-background-medium,
.neutral-background-strong,
.neutral-alpha-weak,
.neutral-alpha-medium,
.neutral-alpha-strong {
    ::selection {
        background-color: var(--neutral-on-background-weak);
        color: var(--neutral-background-weak);
    }
}

.neutral-solid-weak,
.neutral-solid-medium,
.neutral-solid-strong {
    ::selection {
        background-color: var(--neutral-background-weak);
        color: var(--neutral-on-background-medium);
    }
}

.neutral-background-weak {
    background-color: var(--neutral-background-weak);
}

.neutral-background-medium {
    background-color: var(--neutral-background-medium);
}

.neutral-background-strong {
    background-color: var(--neutral-background-strong);
}

.neutral-solid-weak {
    background-color: var(--neutral-solid-weak);
}

.neutral-solid-medium {
    background-color: var(--neutral-solid-medium);
}

.neutral-solid-strong {
    background-color: var(--neutral-solid-strong);
}

.neutral-alpha-weak {
    background-color: var(--neutral-alpha-weak);
}

.neutral-alpha-medium {
    background-color: var(--neutral-alpha-medium);
}

.neutral-alpha-strong {
    background-color: var(--neutral-alpha-strong);
}

/* BRAND */
.brand-background-weak,
.brand-background-medium,
.brand-background-strong,
.brand-alpha-weak,
.brand-alpha-medium,
.brand-alpha-strong {
    ::selection {
        background-color: var(--brand-on-background-weak);
        color: var(--brand-background-weak);
    }
}

.brand-solid-weak,
.brand-solid-medium,
.brand-solid-strong {
    ::selection {
        background-color: var(--brand-background-weak);
        color: var(--brand-on-background-medium);
    }
}

.brand-background-weak {
    background-color: var(--brand-background-weak);
}

.brand-background-medium {
    background-color: var(--brand-background-medium);
}

.brand-background-strong {
    background-color: var(--brand-background-strong);
}

.brand-solid-weak {
    background-color: var(--brand-solid-weak);
}

.brand-solid-medium {
    background-color: var(--brand-solid-medium);
}

.brand-solid-strong {
    background-color: var(--brand-solid-strong);
}

.brand-alpha-weak {
    background-color: var(--brand-alpha-weak);
}

.brand-alpha-medium {
    background-color: var(--brand-alpha-medium);
}

.brand-alpha-strong {
    background-color: var(--brand-alpha-strong);
}

/* ACCENT */
.accent-background-weak,
.accent-background-medium,
.accent-background-strong,
.accent-alpha-weak,
.accent-alpha-medium,
.accent-alpha-strong {
    ::selection {
        background-color: var(--accent-on-background-weak);
        color: var(--accent-background-weak);
    }
}

.accent-solid-weak,
.accent-solid-medium,
.accent-solid-strong {
    ::selection {
        background-color: var(--accent-background-weak);
        color: var(--accent-on-background-medium);
    }
}

.accent-background-weak {
    background-color: var(--accent-background-weak);
}

.accent-background-medium {
    background-color: var(--accent-background-medium);
}

.accent-background-strong {
    background-color: var(--accent-background-strong);
}

.accent-solid-weak {
    background-color: var(--accent-solid-weak);
}

.accent-solid-medium {
    background-color: var(--accent-solid-medium);
}

.accent-solid-strong {
    background-color: var(--accent-solid-strong);
}

.accent-alpha-weak {
    background-color: var(--accent-alpha-weak);
}

.accent-alpha-medium {
    background-color: var(--accent-alpha-medium);
}

.accent-alpha-strong {
    background-color: var(--accent-alpha-strong);
}

/* INFO */
.info-background-weak,
.info-background-medium,
.info-background-strong,
.info-alpha-weak,
.info-alpha-medium,
.info-alpha-strong {
    ::selection {
        background-color: var(--info-on-background-weak);
        color: var(--info-background-weak);
    }
}

.info-solid-weak,
.info-solid-medium,
.info-solid-strong {
    ::selection {
        background-color: var(--info-background-weak);
        color: var(--info-on-background-medium);
    }
}

.info-background-weak {
    background-color: var(--info-background-weak);
}

.info-background-medium {
    background-color: var(--info-background-medium);
}

.info-background-strong {
    background-color: var(--info-background-strong);
}

.info-solid-weak {
    background-color: var(--info-solid-weak);
}

.info-solid-medium {
    background-color: var(--info-solid-medium);
}

.info-solid-strong {
    background-color: var(--info-solid-strong);
}

.info-alpha-weak {
    background-color: var(--info-alpha-weak);
}

.info-alpha-medium {
    background-color: var(--info-alpha-medium);
}

.info-alpha-strong {
    background-color: var(--info-alpha-strong);
}

/* DANGER */
.danger-background-weak,
.danger-background-medium,
.danger-background-strong,
.danger-alpha-weak,
.danger-alpha-medium,
.danger-alpha-strong {
    ::selection {
        background-color: var(--danger-on-background-weak);
        color: var(--danger-background-weak);
    }
}

.danger-solid-weak,
.danger-solid-medium,
.danger-solid-strong {
    ::selection {
        background-color: var(--danger-background-weak);
        color: var(--danger-on-background-medium);
    }
}

.danger-background-weak {
    background-color: var(--danger-background-weak);
}

.danger-background-medium {
    background-color: var(--danger-background-medium);
}

.danger-background-strong {
    background-color: var(--danger-background-strong);
}

.danger-solid-weak {
    background-color: var(--danger-solid-weak);
}

.danger-solid-medium {
    background-color: var(--danger-solid-medium);
}

.danger-solid-strong {
    background-color: var(--danger-solid-strong);
}

.danger-alpha-weak {
    background-color: var(--danger-alpha-weak);
}

.danger-alpha-medium {
    background-color: var(--danger-alpha-medium);
}

.danger-alpha-strong {
    background-color: var(--danger-alpha-strong);
}

/* WARNING */
.warning-background-weak,
.warning-background-medium,
.warning-background-strong,
.warning-alpha-weak,
.warning-alpha-medium,
.warning-alpha-strong {
    ::selection {
        background-color: var(--warning-on-background-weak);
        color: var(--warning-background-weak);
    }
}

.warning-solid-weak,
.warning-solid-medium,
.warning-solid-strong {
    ::selection {
        background-color: var(--warning-background-weak);
        color: var(--warning-on-background-medium);
    }
}

.warning-background-weak {
    background-color: var(--warning-background-weak);
}

.warning-background-medium {
    background-color: var(--warning-background-medium);
}

.warning-background-strong {
    background-color: var(--warning-background-strong);
}

.warning-solid-weak {
    background-color: var(--warning-solid-weak);
}

.warning-solid-medium {
    background-color: var(--warning-solid-medium);
}

.warning-solid-strong {
    background-color: var(--warning-solid-strong);
}

.warning-alpha-weak {
    background-color: var(--warning-alpha-weak);
}

.warning-alpha-medium {
    background-color: var(--warning-alpha-medium);
}

.warning-alpha-strong {
    background-color: var(--warning-alpha-strong);
}

/* SUCCESS */
.success-background-weak,
.success-background-medium,
.success-background-strong,
.success-alpha-weak,
.success-alpha-medium,
.success-alpha-strong {
    ::selection {
        background-color: var(--success-on-background-weak);
        color: var(--success-background-weak);
    }
}

.success-solid-weak,
.success-solid-medium,
.success-solid-strong {
    ::selection {
        background-color: var(--success-background-weak);
        color: var(--success-on-background-medium);
    }
}

.success-background-weak {
    background-color: var(--success-background-weak);
}

.success-background-medium {
    background-color: var(--success-background-medium);
}

.success-background-strong {
    background-color: var(--success-background-strong);
}

.success-solid-weak {
    background-color: var(--success-solid-weak);
}

.success-solid-medium {
    background-color: var(--success-solid-medium);
}

.success-solid-strong {
    background-color: var(--success-solid-strong);
}

.success-alpha-weak {
    background-color: var(--success-alpha-weak);
}

.success-alpha-medium {
    background-color: var(--success-alpha-medium);
}

.success-alpha-strong {
    background-color: var(--success-alpha-strong);
}