@for $i from 1 to 4 {

    .monster-theme-primary-$(i) {
        background-color: var(--monster-bg-color-primary-$i);
        color: var(--monster-color-primary-$i);
    }
    
    .monster-theme-primary-disabled-$(i) {
        background-color: var(--monster-bg-color-primary-disabled-$i);
        color: var(--monster-color-primary-disabled-$i);
    }

    .monster-theme-secondary-$(i) {
        background-color: var(--monster-bg-color-secondary-$i);
        color: var(--monster-color-secondary-$i);
    }

    .monster-theme-tertiary-$(i) {
        background-color: var(--monster-bg-color-tertiary-$i);
        color: var(--monster-color-tertiary-$i);
    }

    .monster-theme-destructive-$(i) {
        background-color: var(--monster-bg-color-destructive-$i);
        color: var(--monster-color-destructive-$i);
    }

    .monster-theme-success-$(i) {
        background-color: var(--monster-bg-color-success-$i);
        color: var(--monster-color-success-$i);
    }

    .monster-theme-warning-$(i) {
        background-color: var(--monster-bg-color-warning-$i);
        color: var(--monster-color-warning-$i);
    }

    .monster-theme-error-$(i) {
        background-color: var(--monster-bg-color-error-$i);
        color: var(--monster-color-error-$i);
    }

    .monster-theme-selection-$(i) {
        background-color: var(--monster-bg-color-selection-$i);
        color: var(--monster-color-selection-$i);
    }

    .monster-border-color-$(i) {
        border-color: var(--monster-color-border-$i);
    }

    .monster-color-neutral-$(i) {
        color: var(--monster-color-primary-$i);
    }

    .monster-bg-color-primary-$(i) {
        background-color: var(--monster-bg-color-primary-$i);
    }

    .monster-bg-color-secondary-$(i) {
        background-color: var(--monster-bg-color-secondary-$i);
    }

    .monster-bg-color-tertiary-$(i) {
        background-color: var(--monster-bg-color-tertiary-$i);
    }    
   
    
    
    /*** @DEPRECATED since 2023-02-03 */
    .monster-color-primary-$(i) {
        background-color: var(--monster-bg-color-primary-$i);
        color: var(--monster-color-primary-$i);
    }
    
    .monster-color-secondary-$(i) {
        background-color: var(--monster-bg-color-secondary-$i);
        color: var(--monster-color-secondary-$i);
    }
        
    .monster-color-tertiary-$(i) {
        background-color: var(--monster-bg-color-tertiary-$i);
        color: var(--monster-color-tertiary-$i);
    }
    
    .monster-color-destructive-$(i) {
        background-color: var(--monster-bg-color-destructive-$i);
        color: var(--monster-color-destructive-$i);
    }
    
    .monster-color-success-$(i) {
        background-color: var(--monster-bg-color-success-$i);
        color: var(--monster-color-success-$i);
    }
    
    .monster-color-warning-$(i) {
        background-color: var(--monster-bg-color-warning-$i);
        color: var(--monster-color-warning-$i);
    }
    
    .monster-color-error-$(i) {
        background-color: var(--monster-bg-color-error-$i);
        color: var(--monster-color-error-$i);
    }
    
    .monster-color-selection-$(i) {
        background-color: var(--monster-bg-color-selection-$i);
        color: var(--monster-color-selection-$i);
    }
    
}

.monster-theme-control-container-1 {
    background-color: var(--monster-theme-control-bg-color);
    color: var(--monster-theme-control-color);
    border: 1px solid var(--monster-theme-control-border-color);
}

.monster-theme-control-row-1 {
    background-color: var(--monster-theme-control-bg-color);
    color: var(--monster-theme-control-color);
    border: 1px solid var(--monster-theme-control-border-color);
}

.monster-theme-control-element {
    background-color: var(--monster-theme-control-bg-color);
    color: var(--monster-theme-control-color);
}

.monster-theme-control-background {
    background-color: var(--monster-theme-control-bg-color);
}

.monster-theme-background-inherit {
    background-color: inherit !important;
}

.monster-theme-on {
    color: var(--monster-theme-on-color);
    background-color: var(--monster-theme-on-bg-color);
}

.monster-theme-off {
    color: var(--monster-theme-off-color);
    background-color: var(--monster-theme-off-bg-color);
}