$base-size: 1.5em !default;
$base-padding: .3em !default;
$external-margin: .2em 0 !default;

.jssocials-shares {
    margin: $external-margin;
}

.jssocials-shares * {
    box-sizing: border-box;
}

.jssocials-share {
    display: inline-block;
    vertical-align: top;
    margin: $base-padding 2*$base-padding $base-padding 0;
}

.jssocials-share:last-child {
    margin-right: 0;
}

.jssocials-share-logo {
    width: 1em;
    vertical-align: middle;
    font-size: $base-size;
}

img.jssocials-share-logo {
    width: auto;
    height: 1em;
}

.jssocials-share-link {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    line-height: 1;

    &.jssocials-share-link-count {
        padding-top: .2em;

        .jssocials-share-count {
            display: block;
            font-size: .6em;
            margin: 0 -.5em -.8em -.5em;
        }
    }

    &.jssocials-share-no-count {
        padding-top: .5em;

        .jssocials-share-count {
            height: 1em;
        }
    }
}

.jssocials-share-label {
    padding-left: $base-padding;
    vertical-align: middle;
}

.jssocials-share-count-box {
    display: inline-block;
    height: $base-size;
    padding: 0 $base-padding;
    line-height: 1;
    vertical-align: middle;
    cursor: default;

    &.jssocials-share-no-count {
        display: none;
    }
}

.jssocials-share-count {
    line-height: $base-size;
    vertical-align: middle;
}