/**
 *
 *
 *
 *
 *
 */

@each $name, $color in $colors {
    $class: str-replace($name, '--', '');

    .color-#{$class} {
        color: var(#{$name});
    }
}

@each $name, $color in $colors {
    $class: str-replace($name, '--', '');

    .fill-#{$class} {
        fill: var(#{$name});
    }
}

@each $name, $color in $colors {
    $class: str-replace($name, '--', '');

    .border-color-#{$class} {
        border-color: var(#{$name});
    }
}

@each $name, $color in $colors {
    $class: str-replace($name, '--', '');

    .background-color-#{$class} {
        background-color: var(#{$name});
    }
}