%btn-base {
    @include adaptive-font(17, 15);
    @include anim;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    min-height: 60px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    padding: 5px 21px;
    min-width: 100px;

    @include media('>=tablet') {
        min-height: 42px;
    }

    span {
        font-weight: 400;
        margin-left: 4px;
    }
}

.btn-primary {
    @extend %btn-base;
    border-radius: 4px;
    border-color: rgba(#fff, .3);
    box-shadow: 0 4px 20px rgba(215, 55, 55, 0.58);
    background-color: #d73737;
    font-family: $font-primary;
    color: #fff;

    @include hover {
        color: #fff;
        background-color: #f85454;
    }

    span {
        font-weight: 400;
    }
}

.btn-block {
    width: 100%;
}

.btn-secondary {
    @extend %btn-base;
    box-shadow: 0 4px 20px rgba(55, 148, 215, 0.58);
    border-color: rgba(#fff, .3);
    background-color: #3385d0;
    color: #fff;

    @include hover {
        color: #fff;
        background-color: #439aea;
    }
}

.btn-transparency {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    outline: none;
}
