// ==========================================================================
// Button styling
// ==========================================================================

.shr,
.shr__button {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-top: ceil($shr-padding-base / 4);
    margin-bottom: ceil($shr-padding-base / 4);
    white-space: nowrap;
}

// Cancel out margin for wrapped buttons
.shr .shr__button {
    margin-top: 0;
    margin-bottom: 0;
}

// Adjacent buttons
.shr + .shr,
.shr__button + .shr__button,
.shr + .shr__button,
.shr__button + .shr {
    margin-left: ceil($shr-padding-base / 2);
}

// Shared
.shr__button,
.shr__count {
    vertical-align: middle;
    border-radius: $shr-button-border-radius;
    font-weight: $shr-font-weight;
    box-shadow: transparentize($color: #000, $amount: 0.1);
}

// Buttons
.shr__button {
    padding: ceil($shr-padding-base / 4) ceil($shr-padding-base / 2);
    @include shr-button-styles();
    transition: all 0.3s ease;
    color: $shr-button-text-color;
    text-decoration: none;
    user-select: none;
    border: 0;

    // Focus styles are handled in the mixin
    &:focus {
        outline: 0;
    }

    &:hover,
    &:focus {
        border: 0;
    }

    // Icons
    svg {
        display: inline-block;
        fill: currentColor;
        width: 16px;
        height: 16px;
        margin-right: ceil($shr-padding-base / 2);
    }

    // Network specific styles
    &--facebook {
        @include shr-button-styles($shr-button-facebook-bg-color);
    }

    &--twitter {
        @include shr-button-styles($shr-button-twitter-bg-color);
    }

    &--pinterest {
        @include shr-button-styles($shr-button-pinterest-bg-color);
    }

    &--google {
        @include shr-button-styles($shr-button-google-bg-color);
    }

    &--github {
        @include shr-button-styles($shr-button-github-bg-color, darken($shr-button-github-bg-color, 10%));
    }

    &--youtube {
        @include shr-button-styles($shr-button-youtube-bg-color);
    }
}

// Count bubble
.shr__count {
    display: inline-block;
    position: relative;
    padding: ($shr-padding-base / 4) ($shr-padding-base / 3);
    background: $shr-button-count-bg;
    text-align: center;
    min-width: 32px;
    color: $shr-button-count-text-color;

    // The arrow
    &::before {
        content: "";
        position: absolute;
        width: $shr-button-count-arrow-size;
        height: $shr-button-count-arrow-size;
        top: 50%;
        margin-top: -($shr-button-count-arrow-size / 2);
        background: inherit;
    }
}

.shr__count--after {
    margin-left: ($shr-padding-base / 2);

    &::before {
        left: 2px;
        transform: rotate(-45deg) translate(-50%, -50%);
    }
}

.shr__count--before {
    margin-right: ($shr-padding-base / 2);

    &::before {
        right: 2px;
        transform: rotate(135deg) translate(-50%, -50%);
    }
}