@mixin background-primary() {
    background-color: var(--mf-background-primary-color);
    color: var(--mf-background-primary-text-color);
}

@mixin btn-large() {
    height: 50px;
    line-height: 50px;
    padding: 0 25px;
}

@mixin btn-small() {
    height: 40px;
    line-height: 39px;
    padding: 0 25px;
}

.mf-background-primary {
    @include background-primary();
}

@mixin btn-primary() {
    @include background-primary();
    @include btn-large();
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
}

.btn-primary,
.btn {
    @include btn-primary();
}

@mixin btn-secondary() {
    @include btn-large();
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
    background-color: #88aa00;
    color: $light;

    &:hover,
    &:focus,
    &:active {
        background-color: #88aa00;
        color: $light;
    }
}

@mixin btn-primary-small() {
    @include background-primary();
    @include btn-small();
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border: none;
}

.btn-primary-small {
    @include btn-primary-small();
}

@mixin btn-primary-outline() {
    @include btn-large();
    border: 1px solid #bfbfbf;
    background-color: transparent;
    color: #000;
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 600;
    text-align: center;

    &:hover {
        color: #000;
    }
}

.btn-primary-outline {
    @include btn-primary-outline();
}

@mixin btn-primary-small-outline() {
    @include btn-small();
    border: 1px solid #bfbfbf;
    background-color: transparent;
    color: #000;
    transition: all 0.5s;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    &:hover {
        color: #000;
    }
}

.btn-primary-small-outline {
    @include btn-primary-small-outline();
}

@mixin icon( $icon ) {
    content: $icon;
    display: inline-block;
    font: normal normal normal 14px/1 linearicons;
}

@mixin slick-dots() {
    text-align: center;
    li {
        width: 10px;
        height: 10px;
        background-color: #ccc;
        display: inline-block;
        border-radius: 50%;
        margin: 0 8px;
        transition: 0.5s;
        cursor: pointer;
        button {
            display: none;
        }

        &.slick-active {
            background-color: var(--mf-background-primary-color);
        }
    }
}

@mixin mf-vc-loading() {
    position: relative;

    .mf-vc-loading--wrapper {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;

        &:before {
            @include mf-small-loading();
            border-color: var(--mf-border-primary-color) var(--mf-border-primary-color) var(--mf-border-primary-color) transparent;
            border-width: 2px;
            width: 100%;
            height: 100%;
            position: absolute;
        }
    }
}

@mixin mf-loading() {
    position: relative;
    &:before {
        @include mf-small-loading();
        border-color: var(--mf-border-primary-color) var(--mf-border-primary-color) var(--mf-border-primary-color) transparent;
        border-width: 2px;
        width: 40px;
        height: 40px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@mixin mf-small-loading() {
    border-width: 1px;
    border-color: #666 #666 #666 transparent;
    border-radius: 50%;
    border-style: solid;
    animation: mf-spin-fast 1s linear infinite;
    content: " ";
    width: 14px;
    height: 14px;
    font-weight: 400;
}

.mf-loading {
    @include mf-loading();
}

.mf-vc-loading {
    @include mf-vc-loading();
}

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes mf-spin-fast {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    50% {
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    to {
        -webkit-transform: rotate(1800deg);
        transform: rotate(1800deg)
    }
}

@-webkit-keyframes mf-spin-fast {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    50% {
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    to {
        -webkit-transform: rotate(1800deg);
        transform: rotate(1800deg)
    }
}

@-o-keyframes mf-spin-fast {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    50% {
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    to {
        -webkit-transform: rotate(1800deg);
        transform: rotate(1800deg)
    }
}

@-ms-keyframes mf-spin-fast {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        animation-timing-function: cubic-bezier(.55, .055, .675, .19)
    }
    50% {
        -webkit-transform: rotate(900deg);
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(.215, .61, .355, 1)
    }
    to {
        -webkit-transform: rotate(1800deg);
        transform: rotate(1800deg)
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    to {
        opacity: 1;
        transform: none;
    }
}