@import "shares";

$link-text-color: #fff !default;
$count-box-bg: #f5f5f5 !default;
$count-color: #444 !default;
$count-arrow-size: .4em !default;
$count-arrow-offset: $count-arrow-size - .1em !default;
$transition: background 200ms ease-in-out, border-color 200ms ease-in-out !default;

@for $i from 0 to length($share-names) {
    $social: nth($share-names, $i + 1);
    $background: nth($share-colors, $i + 1);

    .jssocials-share-#{$social} .jssocials-share-link {
        background: $background;

        &:hover {
            background: darken($background, 10%);
        }
    }
}

.jssocials-share-link {
    padding: .5em .6em;
    color: $link-text-color;
    transition: $transition;

    &:hover, &:focus, &:active {
        color: $link-text-color;
    }
}

.jssocials-share-count-box {
    position: relative;
    height: 2.5em;
    padding: 0 .3em;
    margin-left: $count-arrow-offset;
    background: $count-box-bg;
    transition: $transition;

    &:hover {
        background: darken($count-box-bg, 10%);

        &:after {
            border-color: transparent darken($count-box-bg, 10%) transparent transparent;
        }
    }

    &:after {
        content: "";
        display: block;
        position: absolute;
        top: 1.25em - $count-arrow-size;
        left: -$count-arrow-offset;
        width: 0;
        height: 0;
        border-width: $count-arrow-size $count-arrow-size $count-arrow-size 0;
        border-style: solid;
        border-color: transparent $count-box-bg transparent transparent;
        transform: rotate(360deg);
        transition: $transition;
    }

    .jssocials-share-count {
        line-height: 2.5em;
        color: $count-color;
    }
}