@mixin hover {
    &:hover { @content }
}

@mixin hover-focus {
    @if $enable-hover-media-query {
        &:focus { @content }
        @include hover { @content }
    } @else {
        &:focus,
        &:hover {
            @content
        }
    }
}

@mixin clearfix() {
    &::after {
        display: block;
        content: "";
        clear: both;
    }
}

@mixin ellipsis($text-overflow: ellipsis) {
    & {
        overflow: hidden;
        text-overflow: $text-overflow;
        white-space: nowrap;
    }
}

@mixin transition($time: .3s) {
    transition: background $time, color $time;
}

@mixin link {
    @include transition;

    color: $link-color;
    font-size: inherit;
    text-decoration: $link-decoration;

    @include hover-focus {
        //color: $link-hover-color;
        text-decoration: $link-hover-decoration;
    }
}

@mixin btn {
    @include transition;

    //width: 100%;
    min-height: 30px;

    border: 0;
    padding: 10px 15px;

    font-family: "Roboto Slab";
    font-size: 18px;

    text-align: center;

    @include hover-focus {
        text-decoration: none;
        cursor: pointer;
    }
}

@mixin btn-primary-hov {
    color: $black;

    @include hover-focus {
        background: darken($brand-primary, 15%);
        color: $white;
    }
}

@mixin btn-success-hov {
    background-color: $brand-success;
    color: $white;
    //background: $gray-lighter;
    //color: $black;

    @include hover-focus {
        background: darken($brand-success, 15%);
        color: $white;
    }
}