.ssk {
    @padding-base: 7px;
    @font-size-base: 22px;
    background-color: @gray;
    color: white;
    display: inline-block;
    font-size: @font-size-base;
    line-height: 1px;
    margin-right: 2px;
    margin-bottom: 2px;
    padding: @padding-base;
    text-align: center;
    text-decoration: none;
    .transition(background-color 0.1s);

    // Sizing;
    &:before, .@{glyphicon-css-prefix}, .@{fa-css-prefix} {
        position: relative;
        font-size: @font-size-base;
        top: 0;
        vertical-align: middle;
    }
    &.ssk-xs, .ssk-xs > & {
        &:before, .@{glyphicon-css-prefix}, .@{fa-css-prefix} { font-size: @font-size-base - 7; }
        padding: @padding-base - 3;
    }
    &.ssk-sm, .ssk-sm > & {
        &:before, .@{glyphicon-css-prefix}, .@{fa-css-prefix} { font-size: @font-size-base - 2; }
        padding: @padding-base - 2;
    }
    &.ssk-lg, .ssk-lg > & {
        &:before, .@{glyphicon-css-prefix}, .@{fa-css-prefix} { font-size: @font-size-base + 6; }
        padding: @padding-base + 2;
    }
    &:last-child {
        margin-right: 0;
    }
    &:hover {
        background-color: @gray-dark;
    }
    &:hover, &:focus {
        color: #fff;
        text-decoration: none;
    }
    // Round
    &.ssk-round, .ssk-round & {
        border-radius: 50%;
        &:before {
            text-indent: 0;
            margin-right: 0;
        }
    }
    // Round
    &.ssk-rounded, .ssk-rounded & {
        border-radius: 15%;
    }
    // Icon only
    &.ssk-icon {
        color: @gray;
        padding: 2px;
        &, &:hover {
            background-color: transparent;
        }
        &:hover {
            color: @gray-dark;
        }
        // Sizing
        font-size: 24px;
        &.ssk-xs, .ssk-xs > & {
            font-size: 16px;
        }
        &.ssk-sm, .ssk-sm > & {
            font-size: 20px;
        }
        &.ssk-lg, .ssk-lg > & {
            font-size: 28px;
        }
    }
    // With text
    &.ssk-text {
        overflow: hidden;
        font-size: 17px;
        line-height: normal;
        padding-right: floor(@padding-base*1.5);
        &:before, .@{glyphicon-css-prefix}, .@{fa-css-prefix} {
            margin: -@padding-base floor(@padding-base*1.5) -@padding-base -@padding-base;
            padding: @padding-base;
            background-color: rgba(0, 0, 0, .15);
            vertical-align: bottom;
            text-indent: 0;
        }
        .ssk-block & {
            display: block;
            margin-right: 0;
            text-align: left;
        }
        // Sizing
        .size-mixin(@font-size, @p-base) {
            font-size: @font-size;
            padding-right: ceil(@p-base*1.4);
            &:before, .@{glyphicon-css-prefix}, .@{fa-css-prefix} {
                margin: -@p-base floor(@p-base*1.5) -@p-base -@p-base;
                padding: @p-base;
            }
        }
        &.ssk-xs, .ssk-xs > & {
            .size-mixin(12px, @padding-base - 3);
        }
        &.ssk-sm, .ssk-sm > & {
            .size-mixin(16px, @padding-base - 2);
        }
        &.ssk-lg, .ssk-lg > & {
            .size-mixin(22px, @padding-base + 2);
        }
    }
}
.ssk-group, .ssk-sticky {
    font-size: 0;
}
.ssk-sticky {
    top: 0;
    position: fixed;
    z-index: 2000;
    @sticky-hover-padding: 15px;
    .ssk {
        .transition(padding 0.1s ease-out);
        margin: 0;
    }
    @media (min-width: @screen-sm-min) {
        &.ssk-left, &.ssk-right {
            .ssk {
                display: block;
                clear: both;
            }
            &.ssk-center {
                top: 50%;
                .transform(translateY(-50%));
            }
        }
        &.ssk-left {
            left: 0;
            .ssk {
                float: left;
                &:hover { padding-left: @sticky-hover-padding; }
            }
        }
        &.ssk-right {
            right: 0;
            .ssk {
                float: right;
                &:hover { padding-right: @sticky-hover-padding; }
            }
        }
    }
    &.ssk-bottom {
        font-size: 0;
        top: auto;
        bottom: 0;
        &.ssk-center {
            left: 50%;
            right: auto;
            .transform(translateX(-50%));
        }
        .ssk {
            vertical-align: bottom;
            &:hover { padding-bottom: @sticky-hover-padding; }
        }
    }
    &.ssk-round {
        &.ssk-xs .ssk:hover {
            padding: round(@sticky-hover-padding / 2);
        }
        &.ssk-sm .ssk:hover {
            padding: round(@sticky-hover-padding / 1.6);
        }
        .ssk:hover {
            padding: round(@sticky-hover-padding / 1.4);
        }
        &.ssk-lg .ssk:hover {
            padding: round(@sticky-hover-padding / 1.2);
        }
    }
    @media (max-width: @screen-xs-max) {
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: 100%;
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        &.ssk-sticky-hide-xs {
            display: none !important;
        }
        .ssk {
            flex: 1;
            width: auto;
            .ssk-num {
                display: none;
            }
            /*.ssk-num {
                width: 100%;
                display: block;
                background-color: fadeout(#fff, 10%);
                border-radius: 0;
            }*/
        }
    }
}
.ssk-count {
    padding-top: 20px;
    .ssk {
        position: relative;
    }
    .ssk-num {
        border-radius: 4px;
        color: lighten(@gray, 10%);
        background-color: rgba(50, 50, 50, .03);
        display: block;
        font-size: 12px;
        left: 0;
        line-height: 20px;
        position: absolute;
        right: 0;
        text-align: center;
        top: -20px;
    }
    &.ssk-sticky {
        @media (min-width: @screen-sm-min) {
            padding-top: 0;
            &.ssk-left, &.ssk-right {
                .ssk-num {
                    top: 20%;
                    background-color: transparent;
                }
            }
            &.ssk-left {
                .ssk-num {
                    left: 100%;
                    margin-left: 5px;
                }
            }
            &.ssk-right {
                .ssk-num {
                    right: 115%;
                    margin-left: -100%;
                    text-align: right;
                }
            }
        }
    }
}
// Mixin for network icon
.make-ssk-icon(@name, @full: true) {
    @color_name: ~"color-@{name}";
    @cls_name: ~".ssk-@{name}";
    @color: @@color_name;
    @color-darken: darken(@color, 10%);
    @{cls_name} {
        background-color: @color;
        .ssk-grayscale > & when (@full = true) {
            background-color: @gray;
        }
        &:hover {
            // This must be after ".ssk-grayscale > &"
            background-color: @color-darken;
        }
        &:hover when (@full = true) {
            background-color: @color-darken;
            .ssk-grayscale > & {
                background-color: @color;
            }
            .ssk-grayscale > & when (@name = 'email') {
                background-color: @color-darken;
            }
        }
        &.ssk-icon when (@full = true) {
            color: @color;
            &:hover {
                color: @color-darken;
            }
            &:before when (@name = 'facebook') {
                // Reset facebook special indent
                text-indent: 0;
                margin-right: 0;
            }
        }
    }
}
// Mixin for extra color
.make-ssk-color(@name) {
    .make-ssk-icon(@name, false);
}
// Network icons
.make-ssk-icon('facebook');
.make-ssk-icon('twitter');
.make-ssk-icon('google-plus');
.make-ssk-icon('pinterest');
.make-ssk-icon('tumblr');
.make-ssk-icon('email');
.make-ssk-icon('vk');
.make-ssk-icon('linkedin');
.make-ssk-icon('whatsapp');
.make-ssk-icon('reddit');
.make-ssk-icon('reddit2');
.make-ssk-icon('buffer');

// Extra colors
.make-ssk-color('turquoise');
.make-ssk-color('emerald');
.make-ssk-color('peter-river');
.make-ssk-color('belize-hole');
.make-ssk-color('amethyst');
.make-ssk-color('wisteria');
.make-ssk-color('wet-asphalt');
.make-ssk-color('midnight-blue');
.make-ssk-color('green-sea');
.make-ssk-color('nephritis');
.make-ssk-color('sunflower');
.make-ssk-color('orange');
.make-ssk-color('carrot');
.make-ssk-color('pumpkin');
.make-ssk-color('alizarin');
.make-ssk-color('pomegranate');
.make-ssk-color('clouds');
.make-ssk-color('concrete');
.make-ssk-color('silver');
.make-ssk-color('asbestos');
.make-ssk-color('dark-gray');
.make-ssk-color('black');