/*------------------------------------*\
    #SVG-ICON
\*------------------------------------*/

// TODO: v4 use explicit pixel values
$svg-icon-size:              $spacing-unit * 3;
$svg-icon-small-size:        $spacing-unit * 2;
$svg-icon-large-size:        $spacing-unit * 4;
$svg-icon-extra-large-size:  $spacing-unit * 6;


.svg-icon {
    display: inline-block;
    width: $svg-icon-size;
    height: $svg-icon-size;
    vertical-align: middle;
}

/**
 * Display modifiers
 */
.svg-icon--block {
    display: block;
}


/**
 * Size Modifiers
 */
.svg-icon--small {
    width: $svg-icon-small-size;
    height: $svg-icon-small-size;
}

.svg-icon--large {
    width: $svg-icon-large-size;
    height: $svg-icon-large-size;
}

.svg-icon--extra-large {
    width: $svg-icon-extra-large-size;
    height: $svg-icon-extra-large-size;
}


/**
 * Color Modifiers
 */
.svg-icon--black { fill: $black; }
.svg-icon--off-black { fill: $off-black; }
.svg-icon--blue { fill: $blue; }
.svg-icon--bright-blue { fill: $bright-blue; }
.svg-icon--green { fill: $green; }
.svg-icon--bright-green { fill: $bright-green; }
.svg-icon--red { fill: $red; }
.svg-icon--dark-gray { fill: $dark-gray; }
.svg-icon--gray { fill: $gray; }
.svg-icon--light-gray { fill: $light-gray; }
.svg-icon--off-white { fill: $off-white; }
.svg-icon--white { fill: $white; }

.svg-icon--link-color { fill: $link-color; }