/*

-------------------------------------------------------------------------------
 TEMPLATE
-------------------------------------------------------------------------------

<button class='button button--contained'>Click me</button>

<button class='button button--toggle material-icons'>home</button>

<button class='button button--contained'><span class='material-icons'>home</span>Home</button>

-------------------------------------------------------------------------------
 OPTIONAL CLASS
-------------------------------------------------------------------------------
button--contained
button--outlined
button--text
button--toggle
-------------------------------------------------------------------------------
--disabled
-------------------------------------------------------------------------------

-------------------------------------------------------------------------------
 EXAMPLES
-------------------------------------------------------------------------------
<button class='button button--outlined' gray>#{CANCEL}</button>
<button class='button button--contained' color="blue">#{SAVE_CHANGES}</button>

ADD:         {right,green}
CANCEL:      {left,outlined}
CLEAR:       {right,orange}
CREATE:      {right,green}
INSERT:      {right,green}
MODIFY:      {right,blue}
NEXT:        {right,blue}
NO:          {left,red}
OK:          {right,blue}
OPEN:        {right,purple}
OTHER:       {right,blue}
PREVIOUS:    {left,blue}
REMOVE:      {right,red}
RENAME:      {right,blue}
SAVE_CHANGES:{right,blue}
SELECT:      {right,blue}
YES:         {right,green}

*/

button.button {
    --fs: 16px; --space-small: 4px; --space: 8px; --space-large: 12px; --radius: 2px; --letter: 0.2px;
	--active: 1px; --shadow: 4px; --shadow-active: 3px;
	
	position: relative; margin: 0; max-width: 100%;
    display: inline-flex; align-items: center; justify-content: center;
    line-height: 1; cursor: pointer;
    -webkit-appearance: none; -webkit-font-smoothing: antialiased;
    -webkit-transition: background-color .25s ease-out,box-shadow .28s;
    transition: background-color .25s ease-out,box-shadow .28s; border: solid 1px transparent;
    letter-spacing: var(--letter); padding: var(--space) var(--space-large); gap: var(--space-small);
	border-radius: var(--radius); font-size: var(--fs); font-weight: 500;
    text-decoration: none; box-sizing: border-box; overflow: hidden;
}

button.button:hover, button.button:focus {
    background-color: hsl(var(--hue),var(--saturation),calc(var(--lightness-bg) + var(--lightness-hover)));
	outline: 0; text-decoration: none;
}

button.button:active {
    left: var(--active); top:var(--active);
}

button.button * {
    cursor: inherit;
	text-overflow: ellipsis;
    max-width: 100%;
    overflow: hidden;
}

button.button--contained{
	--lightness: 100%;
	--lightness-bg: 40%;
    background-color: hsl(var(--hue),var(--saturation),var(--lightness-bg));
	color: hsl(var(--hue),var(--saturation),var(--lightness));
}

button.button--contained:hover, button.button--contained:focus {
    box-shadow: 0 0 var(--shadow) hsla(var(--hue),var(--saturation),50%,1);
}

button.button--contained:active {
    box-shadow: 0 0 var(--shadow-active) hsla(var(--hue),var(--saturation),50%,.5);
}

button.button--contained.--disabled{
	--lightness: 70%;
	--lightness-bg: 90%;
}

button.button--outlined{
	--lightness: 40%;
	--lightness-bg: 100%;
    background-color: hsl(var(--hue),var(--saturation),var(--lightness-bg));
	color: hsl(var(--hue),var(--saturation),var(--lightness));
	border-color: hsl(var(--hue),var(--saturation),70%);
    border-style: solid; border-width: var(--active);
}

button.button--outlined.--disabled{
	--lightness: 80%;
	border-color: hsl(var(--hue),var(--saturation),90%);
}

button.button--text{
	--lightness: 30%;
	--lightness-bg: 100%;
    background-color: hsl(var(--hue),var(--saturation),var(--lightness-bg));
	color: hsl(var(--hue),var(--saturation),var(--lightness));
}

button.button--text.--disabled{
	--lightness: 80%;
}

button.button--toggle{
	--lightness: 40%;
	--lightness-bg: 100%;
    background-color: hsl(var(--hue),var(--saturation),var(--lightness-bg));
	color: hsl(var(--hue),var(--saturation),var(--lightness));
	border-color: hsl(var(--hue),var(--saturation),70%);
	padding: var(--space); margin: var(--active);
}

button.button--toggle.--disabled{
	--lightness: 80%;
	border-color: hsl(var(--hue),var(--saturation),90%);
}

button.--disabled{
	--saturation: 0%;
    cursor: default;
}

button.--disabled.button:hover, button.--disabled.button:focus {
    background-color: hsl(var(--hue),var(--saturation),calc(var(--lightness-bg)));
	outline: 0; text-decoration: none;
    box-shadow: none;
}

button.--disabled.button:active {
    left: 0; top: 0;
    box-shadow: none;
}