@import "shares";

$link-text-color: #fff !default;
$count-border-color: #dcdcdc !default;
$count-color: #444 !default;
$count-arrow-size: 6px !default;
$round-size: .3em !default;
$transition: background 200ms ease-in-out !default;

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

    .jssocials-share-#{$social} .jssocials-share-link {
        background: $color;
        border: 1px solid darken($color, 5%);

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

.jssocials-share-link {
    padding: .5em .6em;
    border-radius: $round-size;
    box-shadow: inset 0 1px 3px rgba(255, 255, 255, 0.3), 0 1px 3px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.15);
    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-size;
    border-radius: $round-size;
    border: 1px solid $count-border-color;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);

    &:before {
        content: "";
        position: absolute;
        top: 1em;
        left: -$count-arrow-size - 3px;
        display: block;
        width: 0;
        border-style: solid;
        border-width: $count-arrow-size $count-arrow-size 0;
        border-color: $count-border-color transparent;
        transform: rotate(90deg);
    }

    &:after {
        content: "";
        position: absolute;
        top: 1em;
        left: -$count-arrow-size - 1px;
        display: block;
        width: 0;
        border-style: solid;
        border-width: ($count-arrow-size - 1px) ($count-arrow-size - 1px) 0;
        border-color: #fff transparent;
        transform: rotate(90deg);
    }

    .jssocials-share-count {
        line-height: 2.75em;
        color: $count-color;
        font-size: .9em;
    }
}