.icon {
    fill: none;
    stroke: $headings-color;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-miterlimit: 10;
    width: 60px;
    height: 60px;
}

.icon--social {
    @extend .transition;
    width: 1rem;
    height: 1rem;
    stroke: none;
    fill: $link-color;
}

a {
    &:hover,
    &:focus {
        .icon--twitter  { fill: #55acee }
        .icon--facebook { fill: #3b5998 }
        .icon--linkedin { fill: #0077b5 }
        .icon--github   { fill: #4183c4 }
    }
}