/* Icon */

.icon {

@include icon;
position: relative;

&.circle {
    @include vendor('transition', 'all 0.2s ease-in-out');
    border: 0;
    border-radius: 100%;
    display: inline-block;
    font-size: 1.25em;
    height: 2.25em;
    left: 0;
    line-height: 2.25em;
    text-align: center;
    text-decoration: none;
    top: 0;
    width: 2.25em;

    &:hover {
        top: -0.2em;
    }

    &.fa-twitter {
        background: _palette(twitter, bg);
        color: _palette(twitter, fg);

        &:hover {
            background: lighten(_palette(twitter, bg), 4);
        }
    }

    &.fa-facebook {
        background: _palette(facebook, bg);
        color: _palette(facebook, fg);

        &:hover {
            background: lighten(_palette(facebook, bg), 4);
        }
    }

    &.fa-google-plus {
        background: _palette(google-plus, bg);
        color: _palette(google-plus, fg);

        &:hover {
            background: lighten(_palette(google-plus, bg), 4);
        }
    }

    &.fa-github {
        background: _palette(github, bg);
        color: _palette(github, fg);

        &:hover {
            background: lighten(_palette(github, bg), 4);
        }
    }

    &.fa-dribbble {
        background: _palette(dribbble, bg);
        color: _palette(dribbble, fg);

        &:hover {
            background: lighten(_palette(dribbble, bg), 4);
        }
    }
}

&.featured {
    cursor: default;
    display: block;
    margin: 0 0 1.5em 0;
    opacity: 0.35;
    text-align: center;

    &:before {
        font-size: 5em;
        line-height: 1em;
    }
}

> .label {
    display: none;
}

}