/**
 * icon
 *
 * use svg as icon
 *
 * <svg class="icon" viewBox="0 0 100 100">
 *     <use src="#"></use>
 * </svg>
 *
 *
 * @author Björn Hase
 *
 */


$crispy__icon__vertical-align: text-bottom !default;
$crispy__icon__margin: 0 2px !default;

$crispy__icon__sizes: (
    'default': $crispy__font-size,
    'small': 12px,
    'large': 28px
) !default;

$crispy__icon__colors: (
    'default': $crispy__color-text,
    'success': $crispy__color-success,
    'warning': $crispy__color-warning,
    'danger': $crispy__color-danger
) !default;

@mixin crispy__icon() {
    .icon {
        display: inline-block;
        position: relative;
        vertical-align: $crispy__icon__vertical-align;
        margin: $crispy__icon__margin;

        @include crispy__icon-colors($crispy__icon__colors);
        @include crispy__icon-sizes($crispy__icon__sizes);
    }
}

/**
 * add modificators for icons as fill from map
 *
 *
 * @param {map} $colors
 *
 */
@mixin crispy__icon-colors($colors) {
     @each $name, $color in $colors {
        @if ($name == 'default') {
             @include crispy__icon-color($color);
        } @else {
            &--#{$name} {
                @include crispy__icon-color($color);
            }
        }
    }
}

/**
 * add color as fill
 *
 *
 * @param {color} $color
 *
 */
@mixin crispy__icon-color($color) {
    fill: $color;
}

/**
 * adding sizes for icons from map
 *
 *
 * @param {map} $sizes
 *
 */
@mixin crispy__icon-sizes($sizes) {
     @each $name, $size in $sizes {
        @if ($name == 'default') {
             @include crispy__icon-size($size);
        } @else {
            &--#{$name} {
                @include crispy__icon-size($size);
            }
        }
    }
}

/**
 * add size for icon as width and height
 *
 *
 * @param {px} $size
 *
 */
@mixin crispy__icon-size($size) {
    width: $size;
}