[data-role="button"] {
    appearance:none;
    position:relative;
    display:inline-flex;
    vertical-align:middle; 
    text-align:left;
    padding:1em 1em;
    min-height:3em;
    min-width:3em;
    box-sizing:border-box; 
    border:1px solid transparent; 
    text-decoration:none; 
    outline:none;
    transition:background-color 0.3s, color 0.3s; 
    font-family:'Work Sans', sans-serif;
    font-weight:normal;
    font-size:1em;    
    font-stretch: 100%;
    font-style: normal;
    font-variant-caps: normal;
    font-variant-east-asian: normal;
    font-variant-ligatures: normal;
    font-variant-numeric: normal;
    font-weight: 400;
    letter-spacing: normal;
    text-indent: 0px;
    text-rendering: auto;
    text-shadow: none;
    text-transform: none;
    word-spacing: 0px;
    writing-mode: horizontal-tb;
    
    flex-direction:row;
    align-items:center;
    align-content:center;
    justify-content:flex-start;
}

[data-role="button"].collapsed { min-height:1em !important; min-width:1em !important; }

[data-role="button"]:hover { cursor:pointer; outline:none; text-decoration:none; transition:background-color 0.3s, color 0.3s; }
[data-role="button"].xs { font-size:0.6em; }
[data-role="button"].small {font-size:0.8em;}
[data-role="button"].medium { font-size:1em; }
[data-role="button"].large { font-size:1.2em; }
[data-role="button"] > big { font-size:calc(1em * 2); }

small [data-role="button"].small { min-height:2em !important; min-width:2em !important; padding:0.5em 0.5em; }



[data-role="button"].green { color:var(--cavelo-white); background:var(--cavelo-green); border-color: var(--cavelo-green); }
[data-role="button"].green:not([disabled]):hover,
[data-role="button"].green.active { color:var(--cavelo-green); background:var(--cavelo-white); }
[data-role="button"].orange { color:var(--cavelo-white); background:var(--cavelo-orange); border-color: var(--cavelo-orange); }
[data-role="button"].orange:not([disabled]):hover,
[data-role="button"].orange.active { color:var(--cavelo-orange); background:var(--cavelo-white); }
[data-role="button"].navy { color:var(--cavelo-white); background:var(--cavelo-navy); border-color: var(--cavelo-navy); }
[data-role="button"].navy:not([disabled]):hover, 
[data-role="button"].navy.active { color:var(--cavelo-navy); background:var(--cavelo-white); }
[data-role="button"].blue { color:var(--cavelo-white); background:var(--cavelo-blue); border-color: var(--cavelo-blue); }
[data-role="button"].blue:not([disabled]):hover, 
[data-role="button"].blue.active { color:var(--cavelo-blue); background:var(--cavelo-white); }
[data-role="button"].white { color:var(--cavelo-black); background:var(--cavelo-white); border-color: var(--cavelo-white); }
[data-role="button"].white:not([disabled]):hover, 
[data-role="button"].white.active { color:var(--cavelo-black); background:var(--cavelo-platinum); }
[data-role="button"].black { color:var(--cavelo-white); background:var(--cavelo-black); border-color: var(--cavelo-black); }
[data-role="button"].black:not([disabled]):hover, 
[data-role="button"].black.active { color:var(--cavelo-black); background:var(--cavelo-white); }
[data-role="button"].grey { color:var(--cavelo-black); background:var(--cavelo-platinum); border-color: var(--cavelo-platinum); }
[data-role="button"].grey:not([disabled]):hover, 
[data-role="button"].grey.active { color:var(--cavelo-black); background:var(--cavelo-white); }
[data-role="button"].dark-grey { color:var(--cavelo-white); background:var(--cavelo-grey); border-color: var(--cavelo-white); }
[data-role="button"].dark-grey:not([disabled]):hover, 
[data-role="button"].dark-grey.active { color:var(--cavelo-black); background:var(--cavelo-white); border-color: var(--cavelo-grey); }
/*!!V2*/
[data-role="button"].gold { color:var(--cavelo-white); background:rgba(0230,191,0,1); border-color: var(--cv-gold); }
[data-role="button"].gold:not([disabled]):hover, 
[data-role="button"].gold.active { color:var(--cv-gold); background:var(--cavelo-white); }
[data-role="button"].bright-blue { color:var(--cavelo-white); background:var(--cv-bright-blue); border-color: var(--cv-bright-blue); }
[data-role="button"].bright-blue:not([disabled]):hover, 
[data-role="button"].bright-blue.active { color:var(--cv-bright-blue); background:var(--cavelo-white); }
[data-role="button"].vivid-blue { color:var(--cavelo-white); background:var(--cv-vivid-blue); border-color: var(--cv-vivid-blue); }
[data-role="button"].vivid-blue:not([disabled]):hover, 
[data-role="button"].vivid-blue.active { color:var(--cv-vivid-blue); background:var(--cavelo-white); }
[data-role="button"].vivid-cyan { color:var(--cavelo-white); background:var(--cv-vivid-cyan); border-color: var(--cv-vivid-cyan); }
[data-role="button"].vivid-cyan:not([disabled]):hover, 
[data-role="button"].vivid-cyan.active { color:var(--cv-vivid-cyan); background:var(--cavelo-white); }
/*!!V2*/
[data-role="button"].transparent { color:var(--cavelo-black); background:transparent; border-color:transparent; }
[data-role="button"].transparent:not([disabled]):hover, 
[data-role="button"].transparent.active { color:var(--cavelo-black); background:transparent; border-color:transparent; }

/* Buttons - inverse - color on hover */
[data-role="button"].inverse { background:var(--cavelo-white); }
[data-role="button"].inverse.green { color:var(--cavelo-green); border-color: var(--cavelo-green); }
[data-role="button"].inverse.green:not([disabled]):hover,
[data-role="button"].inverse.green.active { background:var(--cavelo-green); color:var(--cavelo-white); }
[data-role="button"].inverse.orange { color:var(--cavelo-orange); border-color: var(--cavelo-orange); }
[data-role="button"].inverse.orange:not([disabled]):hover,
[data-role="button"].inverse.orange.active { background:var(--cavelo-orange); color:var(--cavelo-white); }
[data-role="button"].inverse.navy { color:var(--cavelo-navy); border-color: var(--cavelo-navy); }
[data-role="button"].inverse.navy:not([disabled]):hover,
[data-role="button"].inverse.navy.active { background:var(--cavelo-navy); color:var(--cavelo-white); }
[data-role="button"].inverse.blue { color:var(--cavelo-blue); border-color: var(--cavelo-blue); }
[data-role="button"].inverse.blue:not([disabled]):hover,
[data-role="button"].inverse.blue.active { background:var(--cavelo-blue); color:var(--cavelo-white); }
[data-role="button"].inverse.white { color:var(--cavelo-black); background:var(--cavelo-white); border-color: var(--cavelo-white); }
[data-role="button"].inverse.white:not([disabled]):hover,
[data-role="button"].inverse.white.active { color:var(--cavelo-black); background:var(--cavelo-white); }
[data-role="button"].inverse.black { color:var(--cavelo-black); border-color: var(--cavelo-black); }
[data-role="button"].inverse.black:not([disabled]):hover,
[data-role="button"].inverse.black.active { background:var(--cavelo-black); color:var(--cavelo-white); }
[data-role="button"].inverse.grey { color:var(--cavelo-black); border-color: var(--cavelo-platinum); }
[data-role="button"].inverse.grey:not([disabled]):hover,
[data-role="button"].inverse.grey.active { background:var(--cavelo-platinum); color:var(--cavelo-black); }
[data-role="button"].inverse.dark-grey { color:var(--cavelo-black); border-color: var(--cavelo-grey); background-color:var(--cavelo-white); }
[data-role="button"].inverse.dark-grey:not([disabled]):hover,
[data-role="button"].inverse.dark-grey.active {background:var(--cavelo-grey);color:var(--cavelo-white);border-color:var(--cavelo-grey);}
/*!!V2*/
[data-role="button"].inverse.gold { color:rgba(0230,191,0,1); border-color: var(--cv-gold); }
[data-role="button"].inverse.gold:not([disabled]):hover,
[data-role="button"].inverse.gold.active { background:var(--cv-gold); color:var(--cavelo-white); }
[data-role="button"].inverse.bright-blue { color:var(--cv-bright-blue); border-color: var(--cv-bright-blue); }
[data-role="button"].inverse.bright-blue:not([disabled]):hover,
[data-role="button"].inverse.bright-blue.active { background:var(--cv-bright-blue); color:var(--cavelo-white); }
[data-role="button"].inverse.vivid-blue { color:var(--cv-vivid-blue); border-color: var(--cv-vivid-blue); }
[data-role="button"].inverse.vivid-blue:not([disabled]):hover,
[data-role="button"].inverse.vivid-blue.active { background:var(--cv-vivid-blue); color:var(--cavelo-white); }
[data-role="button"].inverse.vivid-cyan { color:var(--cv-vivid-cyan); border-color: var(--cv-vivid-cyan); }
[data-role="button"].inverse.vivid-cyan:not([disabled]):hover,
[data-role="button"].inverse.vivid-cyan.active { background:var(--cv-vivid-cyan); color:var(--cavelo-white); }
/*!!V2*/

[data-role="button"][disabled="true"] { cursor:not-allowed; opacity:0.5; } 
[data-role="button"]>i { margin:0; text-align:center; vertical-align:middle; height:100%; min-width:1.2em; }
[data-role="button"]>i + span { margin-left:0.5em; vertical-align:middle; height:100%; }
[data-role="button"]>span + i { margin-left:0.5em; }
[data-role="button"].block {display:block;width:100%;}

[data-role="button"] + [data-role="button"] { margin-left:0.5em; }
[data-role="button"].block + [data-role="button"].block { margin-top:0.5em; margin-left:0; }

[data-role="button"].text-center { justify-content:center; }

.row.col-1 > [data-role="button"] { margin:0px !important; }