/**
 *  colors
 *
 *
 *  @author Björn Hase, me@herr-hase.wtf
 *  @license http://opensource.org/licenses/MIT The MIT License
 *  @link https://gitea.node001.net/tiny-components/plain-ui.git
 *
 */

@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});

        svg {
            fill: var(#{$name});
        }
    }
}

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

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

            svg {
                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});
    }
}