@mixin button{
    display: inline-block;
	color: $white;
	font-size: 15px;
	padding: 5px 25px;
	letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
    font-family: $font-family;
    font-weight: 700;
    border-radius: $border-radius;
    border: 1px solid $border-color;
    background-color: $main-color;
    @include transition($transition-time-bezier, 'bezier');
	&:hover, &.active{
        transform: translate(-2px, -2px);
        box-shadow: $small-shadow;
    }
    &.active:hover{
        transform: none !important;
        box-shadow: none;
    }
    &.secondary{
        background-color: $main-color;
        &:after{
            background: $main-color;
        }
        &:before{
            border-color: $main-color;
        }
    }
    &.black{
        background: $black;
        &:hover{
            box-shadow: 2px 2px 0px 0px $main-color;
        }
    }
    &.small{
        font-size: 12px;
        padding: 5px 15px;
        &:after{
            padding: 5px 15px;
        }
        &.bordered:hover:after{
            left: -4px;
            top: -4px;
        }
    }
    &.medium{
        font-size: 15px;
        padding: 5px 20px;
        &:after{
            padding: 5px 20px;
        }
        &.bordered:hover:after{
            left: -4px;
            top: -4px;
        }
    }
    &.large{ font-size: 20px; padding: 8px 40px; }
    &.icon{
        i{
            vertical-align: middle;
            position: relative;
            top: -2px;
        }
    }
    &.rounded{
        border-radius: $large-border-radius;
    }
    &.circle{
        padding: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        text-align: center;
        line-height: 44px;
        font-size: 16px;
        i.fa{ margin: 0; vertical-align: middle; }
        &:hover{
            transform: translateY(-2px);
        }
    }
    // By Color
	&.dark{
        background-image: none;
        background-color: $black;
        border: 1px solid $black;
        color: $white;
	}
	&.dark:hover{
		color: $black !important;
		background-color: $white;
        svg{
            fill: $black;
        }
	}
    &.white{
        background-color: $white;
        color: $black;
        border: 1px solid $border-color;
        svg{
            fill: $black;
        }
    }
	& i.fa{ font-size: 85%; margin-left: 5px; }
    &.loading:after{
        padding: 0;
        margin-left: 7px;
        content: "";
        display: inline-block;
        vertical-align: middle;
        top: -2px;
        left: 0;
        position: relative;
        height: 12px;
        width: 12px;
        border: 2px solid #fff;
        border-radius: 100%;
        border-right-color: transparent;
        border-top-color: transparent;
        animation: spin .5s infinite linear;
    }

    &.continue-reading{
        svg{
            width: 19px;
            height: 20px;
            vertical-align: middle;
            margin-left: 5px;
            margin-right: -5px;
        }
    }
}

.button, .epcl-button:not(.epcl-shortcode){
    @include button;
}

/* Global Tags */

div.tags{
    display: block;
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 0.5px;
    font-family: $title-font-family;
    a{
        color: $black;
        display: inline-block;
        padding: 6px 15px;
        line-height: 1.2;
        margin-right: 10px;
        background: $white;
        border: 1px solid $border-color;
        border-radius: $border-radius;
        @include transition($transition-time-bezier, 'bezier');
        svg{
            fill: $main-color;
            stroke: rgba(#000, 0.4);
            width: 11px;
            height: 11px;
            margin-right: 7px;
        }
        &:hover{
            color: $black !important;
            transform: translate(-1px, -1px);
            box-shadow: $small-shadow;
        }
    }
    i, svg{
        display: inline-block;
        color: $main-color;
        font-size: 20px;
        vertical-align: middle;
        margin-top: -3px;
        margin-right: 3px;
        width: 20px;
        height: 20px;
    }
    &.absolute{
        position: absolute;
        right: 10px;
        top: 20px;
        z-index: 3;
        margin: 0;
    }
}

/* @end */