/*******************************************************************************
**    ____________________________________________________________________
**   /                                                                    \
**  |     ____      Copyright (c) 2003-2014 - All rights reserved          |
**  |    / _  \                                                            |
**  |   / |_  /     Herve Masson (herve@mindstep.com)                      |
**  |   \____/      Patrick Bihan faou (patrick@mindstep.com)              |
**  |                                                                      |
**  |                                                                      |
**  |      www.mjslib.com                            mjslib@mjslib.com     |
**   \____________________________________________________________________/
**
**  (Svn version: $Id$)
**
********************************************************************************
**
**	Button skin for TEAMBOX's WEBLIB framework (tbl)
**	================================================
**
**	normal		the button is clickable
**	over		the button is clickable AND the mouse is over it
**	disabled	the button can't be clicked
**
*******************************************************************************/

BUTTON.exbutton.skin_tbl.highlight,
DIV.exbutton.skin_tbl.highlight
{
	box-shadow: 0 0 1px 2px #A4B8FF;
}

BUTTON.exbutton.skin_tbl,
DIV.exbutton.skin_tbl
{
	box-sizing:			border-box;
	font-size:			11px;
	display:			inline-flex;
	align-items:		center;
	cursor:				pointer;

	height: 			25px;
	padding:			0 7px;
	text-align:			center;
	box-sizing:			border-box;
	white-space:		nowrap;
	margin-right:		4px;

	border-radius:		5px;
	border:				1px solid transparent;

	color:				white;
	user-select:		none;
	background-color:	var(--color-background-dark);
}

BUTTON.exbutton.skin_tbl.small,
DIV.exbutton.skin_tbl.small
{
	justify-content: 	center;
	padding: 			0 5px;
	height: 			20px;
}

BUTTON.exbutton.skin_tbl.exbutton-image, BUTTON.exbutton.skin_tbl.exbutton-image:hover,
DIV.exbutton.skin_tbl.exbutton-image, DIV.exbutton.skin_tbl.exbutton-image:hover
{
	border:            0;
	background-color:  transparent;
	padding:           0;
	margin:            0;
	border-radius:     0;
}

BUTTON.exbutton.skin_tbl:hover, BUTTON.exbutton.skin_tbl.over,
DIV.exbutton.skin_tbl:hover, DIV.exbutton.skin_tbl.over
{
	text-decoration:    none;
	color: var(--color-primary);
	border-color: var(--color-primary);
	background-color: white;
}

BUTTON.exbutton.skin_tbl.exbutton-image, BUTTON.exbutton.skin_tbl.exbutton-image:hover,
DIV.exbutton.skin_tbl.exbutton-image, DIV.exbutton.skin_tbl.exbutton-image:hover
{
	background-image:	none;
}

/*
**	Disabled state
**
*/

BUTTON.exbutton.skin_tbl.disabled,
DIV.exbutton.skin_tbl.disabled
{
	pointer-events:		none;
	color:				var(--color-disabled-primary);
	background-color:	var(--color-disabled-secondary);
}

BUTTON.exbutton.skin_tbl.disabled:hover,
DIV.exbutton.skin_tbl.disabled:hover
{
	border-color:		var(--color-disabled-primary);
}


/*
**	Button overlay icon (left)
**
*/

BUTTON.exbutton.skin_tbl > I.icon,
DIV.exbutton.skin_tbl > I.icon
{
	display:         inline-block;
	width:           17px;
	height:          17px;
	margin-top:      -2px;
	margin-right:    4px;
	margin-left:     -2px;
	line-height:     17px;
	vertical-align:  text-top;
}

/*
**	Button overlay icon (right)
**
*/

BUTTON.exbutton.skin_tbl > I.icon.right,
DIV.exbutton.skin_tbl > I.icon.right
{
	margin-right:    -2px;
	margin-left:     4px;
}

BUTTON.exbutton.skin_tbl > span.font_icon,
DIV.exbutton.skin_tbl > span.font_icon
{
	font-size:      18px;
    margin-right:   4px;
}

BUTTON.exbutton.skin_tbl.small > span.font_icon,
DIV.exbutton.skin_tbl.small > span.font_icon
{
	font-size:      14px;
	margin-right:   4px;
}

BUTTON.exbutton.skin_tbl > span.font_icon.right,
DIV.exbutton.skin_tbl > span.font_icon.right
{
    margin-left:    4px;
    margin-right:   0px;
}

BUTTON.exbutton.skin_tbl.exbutton-icon-only > span.font_icon,
DIV.exbutton.skin_tbl.exbutton-icon-only > span.font_icon
{
    margin-left:    0px;
    margin-right:   0px;
}