/**
 * PoliCromix button styles
 * 
 * @package    PoliCromix Game Client
 * @author     Alejandro Caballero - lava.caballero@gmail.com
 */

.lbutton        { display: inline-block; position: relative; vertical-align: top;
                  border: 2px solid transparent;
                  background: transparent url('button_bg.svg') center center no-repeat;
                  background-size: cover;
                  padding: 2px 1em;
                  text-decoration: none; text-align: center; cursor: pointer;
                  border-radius: 5px;
                  text-shadow: var(--button-hover-stroke); }
.lbutton:hover  { text-decoration: none; border-style: outset; }
.lbutton:active { border-style: inset; }

/* Skyblue >>> Default */

.lbutton        { color: white !important; background-color: skyblue; background-image: url('button_bg.svg'); }
.lbutton:hover  { border-color: #E1F3FA;   border-style: outset; }
.lbutton:active { border-color: #E1F3FA;   border-style: inset; }

/* Gold button */

.lbutton.gold        { color: white !important; background-color: goldenrod; background-image: url('button_bg.svg'); }
.lbutton.gold:hover  { border-color: #F5E8C5; border-style: outset; }
.lbutton.gold:active { border-color: #F5E8C5; border-style: inset; }

/* Blue button */

.lbutton.blue        { color: white !important; background-color: blue; background-image: url('button_bg.svg'); }
.lbutton.blue:hover  { border-color: #BEBEFF; border-style: outset; }
.lbutton.blue:active { border-color: #BEBEFF; border-style: inset; }

/* Cyan button */

.lbutton.cyan        { color: white !important; background-color: cyan; background-image: url('button_bg.svg'); }
.lbutton.cyan:hover  { border-color: #BDFFFF; border-style: outset; }
.lbutton.cyan:active { border-color: #BDFFFF; border-style: inset; }


/* Green button */

.lbutton.green        { color: white !important; background-color: green; background-image: url('button_bg.svg'); }
.lbutton.green:hover  { border-color: #BFDFBF; border-style: outset; }
.lbutton.green:active { border-color: #BFDFBF; border-style: inset; }

/* Magenta button */

.lbutton.magenta        { color: white !important; background-color: magenta; background-image: url('button_bg.svg'); }
.lbutton.magenta:hover  { border-color: #FFBEFF; border-style: outset; }
.lbutton.magenta:active { border-color: #FFBEFF; border-style: inset; }

/* Orange button */

.lbutton.orange        { color: white !important; background-color: darkorange; background-image: url('button_bg.svg'); }
.lbutton.orange:hover  { border-color: #FFE2BF; border-style: outset; }
.lbutton.orange:active { border-color: #FFE2BF; border-style: inset; }

/* Pink button */

.lbutton.pink        { color: white !important; background-color: pink; background-image: url('button_bg.svg'); }
.lbutton.pink:hover  { border-color: #FFEFF2; border-style: outset; }
.lbutton.pink:active { border-color: #FFEFF2; border-style: inset; }

/* Purple button */

.lbutton.purple        { color: white !important; background-color: purple; background-image: url('button_bg.svg'); }
.lbutton.purple:hover  { border-color: #DFBFDF; border-style: outset; }
.lbutton.purple:active { border-color: #DFBFDF; border-style: inset; }

/* Red button */

.lbutton.red        { color: white !important; background-color: red; background-image: url('button_bg.svg'); }
.lbutton.red:hover  { border-color: #FFBEBE; border-style: outset; }
.lbutton.red:active { border-color: #FFBEBE; border-style: inset; }

/* White button */

.lbutton.white        { color: white !important; background-color: white; background-image: url('button_bg.svg'); }
.lbutton.white:hover  { border-color: white; border-style: outset; }
.lbutton.white:active { border-color: white; border-style: inset; }

/* Yellow button */

.lbutton.yellow        { color: white !important; background-color: yellow; background-image: url('button_bg.svg'); }
.lbutton.yellow:hover  { border-color: #FFFFBE; border-style: outset; }
.lbutton.yellow:active { border-color: #FFFFBE; border-style: inset; }

/* Disabled case */

.lbutton[disabled], .lbutton.disabled {
    filter: grayscale(100%) brightness(50%);
    opacity: 0.75;
    pointer-events: none;
}