/*--------------------------------------------------------------------------*\
    Button loader
\*--------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------*\
        Loader (small circle turning)
\*--------------------------------------------------------------------------*/

form.is-disabled .btn::before,
form.is-disabled .btn::after {
    /*box*/
    position: absolute;
    right: 10px;

    /*border*/
    border: 2px solid transparent;
    border-radius: 50%;

    /*text*/
    content: '';
}

form.is-disabled .btn::before {
    /*box*/
    opacity: 0.3;

    /*border*/
    border-color: inherit !important;
}

form.is-disabled .btn::after {
    /*box*/
    z-index: 1;

    /*border*/
    border-top-color: inherit !important;

    /*animation*/
    animation-name: rotate;
    -webkit-animation-name: rotate;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
    -webkit-animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    -webkit-animation-iteration-count: infinite;
}

/*--------------------------------------------------------------------------*\
        Loader sizes
\*--------------------------------------------------------------------------*/

.btn--tn::before,
.btn--tn::after {
    /*box*/
    height: 12px;
    width: 12px;
    top: calc(50% - 6px);
}

.btn--sm::before,
.btn--sm::after {
    /*box*/
    height: 15px;
    width: 15px;
    top: calc(50% - 7.5px);
}

.btn--md::before,
.btn--md::after {
    /*box*/
    height: 17px;
    width: 17px;
    top: calc(50% - 8.5px);
}

.btn--lg::before,
.btn--lg::after {
    /*box*/
    height: 22px;
    width: 22px;
    top: calc(50% - 11px);
    right: 20px !important;
}

/*--------------------------------------------------------------------------*\
        In btn-wrapper
\*--------------------------------------------------------------------------*/

.btn-wrapper--right>.btn:first-child{
    /*box*/
    margin-right:5px;
}

.btn-wrapper--center>.btn{
    /*box*/
    margin:0px 10px;
}

/*--------------------------------------------------------------------------*\
        Disabled
\*--------------------------------------------------------------------------*/

.is-disabled .btn{
    /*box*/
    cursor:wait !important;/* In addition to .is-disabled, althought it does not show wait cursor */
}