.#{$namespace}button-social {
    $root: &;
    font-size: 1rem;
    border-radius: 4px;
    text-align: center;
    color: $colorWhite;
    transform: skew(-10deg);
    box-sizing: border-box;
    overflow: hidden;
    display: inline-block;
    background: $colorMineShaft;
    border-color: $colorMineShaft;
    cursor: pointer;
    padding: 1rem;
    min-width: 4rem;
    height: 4rem;
    margin: 0.5rem 0.2rem;

    &:hover {
        background: $colorCeruleanBlueHover;
        border-color: $colorCeruleanBlueHover;
    }

    &__icon {
        display: inline-block;
        font-weight: 700;
        transform: skew(10deg);
        width: 1.8rem;
        height: 2.1rem;
        overflow: hidden;
        fill: $colorWhite;
        color: $colorWhite;

        &--fb {
            width: 0.9rem;
            height: 1.8rem;
        }

        &--yt {
            width: 1.8rem;
            height: 2.1rem;
        }

        &--gplus {
            width: 1.7rem;
            height: 1.8rem;
            transform: translateX(0.3rem);
        }

        &--twitter {
            height: 1.95rem;
            width: 2.35rem;
        }
    }
}