/*////////////////////

    BUTTONS 

////////////////////*/


button:hover.underline{ text-decoration: underline!important}
a.hover-underline:hover{ text-decoration: underline }

/* disabled */
button:disabled, 
button.disabled, 
.button.disabled{
    position: relative;
    pointer-events: none;
    background: var(--gray-400)!important;
    border-color: var(--gray-500)!important;
    z-index: 0;
}
button:disabled > .btn-txt, 
button.disabled > .btn-txt, 
.button.disabled > .btn-txt{
    color: var(--gray-600)!important;
}
button.disabled > .icon{
    fill: gray!important;
    color: gray!important;
}

button, .button{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    width: max-content;
    padding: 0 20px;
    border: 0;
    font-size: 16px;
    cursor: pointer;
    background: transparent;
    transition: all .2s ease-in-out!important;
}

/* button secondary */
button.secondary, 
.button.secondary{
    border: 2px;
    border-style: solid;
    background: transparent;
}
/* button secondary */
button:disabled.secondary, 
.button.secondary.disabled{
    border: 0px;
    background: transparent;
}

/* button text-link */
button.text-link, 
.button.text-link{
    display: inline-block;
    width: max-content;
    padding: 0;
    height: auto;
}

/* button soft */
button.soft, 
.button.soft{
    width: 44px;
    padding: 0 15px!important;
    margin: 0!important;
}

button.soft .icon, 
.button.soft .icon{
    padding: 0!important;
    margin: 0!important;
}

button.soft-sml, 
.button.soft-sml{
    width: 24px;
    height: 24px;
    padding: 0 5px!important;
    margin: 0!important;
}

button.soft-sml .icon, 
.button.soft-sml .icon{
    padding: 0!important;
    margin: 0!important;
    font-size: 12px;
}



button.flex-row-reverse .icon, 
.button.flex-row-reverse .icon{
    padding: 0 10px 0 0;
    margin: 0 0 0 -4px!important;
}

button .icon, 
.button .icon{
    transition: all .05s ease-in-out!important;
}
button .btn-txt, 
a.button .btn-txt{
    transition: all .2s ease-in-out!important;
}

button .icon, 
.button .icon{
    position: relative;
    padding-left: 10px;
    display: flex;
    align-items: center;
}

button .btn-txt, 
a.button .btn-txt{
    display: flex;
    justify-content: center;
    min-width: max-content;
    font-size: 16px;
}

/* Button : Secondary - border styles */
button.border-white, 
a.button.border-white{
    border-color: rgb(255, 255, 255);
}

button.border-black, 
a.button.border-black{
    border-color: black;
}

button.border-red, 
a.button.border-red{
    border-color: var(--red-800);
}

button.border-blue, 
a.button.border-blue{
    border-color: var(--blue-800);
}

button.border-green, 
a.button.border-green{
    border-color: var(--green-800);
}




/*//////////////////////////////// 
    Button - Hover styles 
////////////////////////////////*/

/* hover gray */
button.hover-gray:hover, 
a.button.hover-gray:hover{
    background: var(--gray-300)!important;
}

/* hover white */
button.hover-white-black:hover, 
a.button.hover-white-black:hover{
    background: white!important;
}

button.hover-white-black:hover .btn-txt, 
a.button.hover-white-black:hover .btn-txt{
    color: black!important;
}


button.hover-white-black:hover div.icon, 
a.button.hover-white-black:hover div.icon{
    fill: black!important;
    color: black!important;
}

button.hover-white-red:hover, 
a.button.hover-white-red:hover{
    background: white!important;
}
button.hover-white-red:hover .btn-txt, 
a.button.hover-white-red:hover .btn-txt{
    color: var(--red-800)!important;
}
button.hover-white-red:hover div.icon .icon-svg, 
a.button.hover-white-red:hover div.icon .icon-svg{
    fill: var(--red-800)!important;
}
button.hover-border-none:hover, 
a.button.hover-border-none:hover{
    border:2px transparent solid;
}


button.hover-black:hover, 
a.button.hover-black:hover{
    background: black!important;
}
button.hover-black:hover .btn-txt, 
a.button.hover-black:hover .btn-txt{
    color: white!important;
}
button.hover-black:hover > div.icon .icon-svg{
    fill: white!important;
}


button:hover.hover-red, 
a.button:hover.hover-red{
    background: var(--red-800)!important;
    color: white!important;
}

button.button.secondary:hover{
    border: solid transparent!important;
}

/* button.hover-red:hover .btn-txt, 
a.button.hover-red:hover .btn-txt{
    color: white!important;
} */


/* Hover Red BG - White text and or Icon */

/* button.hover-red:hover > div.icon > i, 
button.hover-red:hover > div.btn-txt, 
a.button.hover-red:hover > div.icon,
a.button.hover-red:hover > div.btn-txt {
    fill: white!important;
    color: white!important;
} */


/* Custom Button Styles */
#progress-btn{
    transition: all .2s ease-in-out;
}

button > .icon > i.icon-anim-right{
    left: 10px;
    transition: all .2s ease-in-out;
}
button:hover > .icon > i.icon-anim-right{
    left: 20px;
    /* transition: all .2s ease-in-out; */
}

@media screen and (max-width: 512px) {   
    button, .button {
        width: inherit;
    }
}