.icon {
    fill: none;
    stroke: $brand-primary;
    color: $brand-main-blue-light;
    stroke-width: .75;
    stroke-linecap: round;
    stroke-linejoin: round;
    width: 60px;
    height: 60px;
}

.icon--social {
    @extend .transition;
    width: 1rem;
    height: 1rem;
    stroke: none;
    fill: $text-color;
    margin-bottom: -2px;

    &.icon--gitter {
        stroke: $text-color;
        stroke-width: 2px;
    }
}

.icon--sm {
    width: .5rem;
    height: .5rem;
}

.icon--gitter {
    stroke-width: 1.5;
    fill: none;
    stroke: $text-color;
}

.icon--caret {
    stroke-width: 2px;
    stroke: currentColor;
}

.icon--external {
    stroke: currentColor;
}