@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 link {
    color: $link-color;
    font-size: inherit;
    text-decoration: $link-decoration;

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

@mixin btn {
    width: 100%;
    min-height: 40px;

    border: 0;
    padding: 15px 10px;

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

    text-align:center;

    transition: background .3s;

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

@mixin btn-primary-hov {
    // background: $gray-lighter;
    color: $black;
    // border: 1px dashed $gray;
    // border-top: 2px solid transparent;
    // border-bottom: 2px solid darken($brand-primary, 15%);

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

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

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