/*******************************************************************************
**    ____________________________________________________________________
**   /                                                                    \
**  |     ____      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 #FF7E00;
}

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

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

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

	color: 						white;
	background-color:	var(--color-background-dark);

	/* Prevent text selection */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

BUTTON.exbutton.skin_tbl.small,
DIV.exbutton.skin_tbl.small
{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2px 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
{
	cursor:              not-allowed;
	background-image:    none;
	color:				#bbb;
}

BUTTON.exbutton.skin_tbl.disabled I,
DIV.exbutton.skin_tbl.disabled I
{
	opacity:	0.5;
}

BUTTON.exbutton.skin_tbl.disabled:hover,
DIV.exbutton.skin_tbl.disabled:hover
{
	border-color:		#b8b8b8;
}


/*
**	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 > 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;
}