///*------------------------------------*\
//    #OBJECTS-ICON
//\*------------------------------------*/

// Icon base styles
.icon {
    vertical-align: top;
    text-align: center;
}





// Icon sizes
.icon--s {
    @include size($size-xs);
    line-height: $size-xs;

    &.icon--circled {
        @include font-size(10px);
    }

    &.icon--flat {
        @include font-size(18px);
    }
}

.icon--l {
    @include size($size-l);
    line-height: $size-l;

    &.icon--circled {
        @include font-size(18px);
    }

    &.icon--flat {
        @include font-size(22px);
    }
}





// Icon colors
@each $key, $color in $colors {
    .icon--circled.icon--#{$key} {
        color: $white-1;
        background-color: $color;
    }

    .icon--flat.icon--#{$key} {
        color: $color;
    }
}





// Icon types
.icon--circled {
    border-radius: 50%;
}