/** ====== button components ====== **/
/** --- theme buttons --- **/
.uc-btn,
.uc-btn-light,
.uc-white-btn,
.uc-btnvtwo{
    gap: 6px;
    border:0;
    z-index: 0;
    cursor: pointer;
    overflow: hidden;
    color: $clr-white;
    position: relative;
    padding: 10px 18px;
    @extend %transition;
    align-items: center;
    display: inline-flex;
    justify-content: center;
    border-radius: $radius;
    background-color: $theme-color;
    font: 600 rem(14)/em(20,14) $heading-font-family;
    &:before{
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-color: $btnhover-color;
        opacity: 0;
        z-index: -1;
        @extend %transition;
    }
    &:hover,
    &:focus{
        outline: none;
        color: $clr-white;
    } 
    &:hover{
        &:before{opacity: 0.1;}
    }
    &.uc-disable_btn{
        pointer-events: none;
        background: $formbg !important;
        color: rgba($color: $text-light, $alpha: 0.5) !important;
    }
}
.rippleholder{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    &.is-active .ripplecircle{ animation: a-ripple .4s ease-in;}
}
.ripplecircle{
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba($dark_black, 0.2);
    z-index: -1;
}
.uc-btnvtwo{
    color: rgba($heading-color,0.7);
    &:hover,
    &:focus{
        color: rgba($heading-color,0.7);
    }
}
.uc-btnsmall{
    height: 36px;
    padding: 8px 14px;
}
.uc-btn-light{
    color: $body-font-color;
    background: transparent;
    border: 1px solid $border-color;
    &:hover{
        color: $body-font-color;
        background :$formbg;
    }
}
.uc-white-btn{
    padding-top: 9px;
    padding-bottom: 9px;
    background: $clr-white;
    border: 1px solid $border-color;
    color: rgba($color: $body-font-color, $alpha: 0.8);
    &:hover,
    &:focus{
        background: $clr-white;
        color: rgba($color: $body-font-color, $alpha: 0.8);

    }
}
.uc-outline-btn{
    background: transparent;
    border: 1px solid rgba($color: #eaeaea, $alpha: 0.8);
    &:hover,
    &:focus{
        background: $clr-white;
        color: $body-font-color;

    }
}
/* theme Global Button style end */
.uc-btn_disable{
    background: $formbg !important;
    pointer-events: none;
    color: rgba($color: $text-light, $alpha: 0.5) !important;
    &:after{
        content: '';
        width: 16px;
        height: 16px;
        border-radius: 50%;
        animation: .5s btnloader infinite linear;
        border: 2px solid rgba($color: $text-light, $alpha: 0.5);
        border-top-color: rgba($color: $text-light, $alpha: 0.1);
    }
}
@keyframes btnloader {
    to {transform: rotate(360deg);}
}