/*******************************************************************************************************************************************
 *******************************************************************************************************************************************

 ######  ########  #######   ######  ##    ## ########    ###    ##    ## ######## 
##    ##    ##    ##     ## ##    ## ##   ##     ##      ## ##   ##   ##  ##       
##          ##    ##     ## ##       ##  ##      ##     ##   ##  ##  ##   ##       
 ######     ##    ##     ## ##       #####       ##    ##     ## #####    ######   
      ##    ##    ##     ## ##       ##  ##      ##    ######### ##  ##   ##       
##    ##    ##    ##     ## ##    ## ##   ##     ##    ##     ## ##   ##  ##       
 ######     ##     #######   ######  ##    ##    ##    ##     ## ##    ## ######## 

*******************************************************************************************************************************************
**************************** see http://www.dev.equideow.com/doc/bow for more details *****************************************************
*******************************************************************************************************************************************
*******************************************************************************************************************************************/

/*
 ######   #######  ##     ## ##     ##  #######  ##    ## 
##    ## ##     ## ###   ### ###   ### ##     ## ###   ## 
##       ##     ## #### #### #### #### ##     ## ####  ## 
##       ##     ## ## ### ## ## ### ## ##     ## ## ## ## 
##       ##     ## ##     ## ##     ## ##     ## ##  #### 
##    ## ##     ## ##     ## ##     ## ##     ## ##   ### 
 ######   #######  ##     ## ##     ##  #######  ##    ## 
*/

.stocktake{
	border-style: solid;
	border-width: 2px;
	border-radius: 8px;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	padding-right: 18px;
	transition: all .15s ease-in-out;
}

/** element : text ************************************************************************************************************************/
.stocktake__text{
	color: #3D251B;
}

/** element : button **********************************************************************************************************************/
.stocktake__button{
	border-radius: 50%;
	border-style: solid;
	border-width: 2px;
	box-sizing: border-box;
	display: block;
	height: 24px;
	position: absolute;
	right: -12px;
	top: 6px;
	width: 24px;
}

/** element : feedback **********************************************************************************************************************/
.stocktake__feedback{
	position: absolute;
	right: 20px;
}

/*
########  ######## ########    ###    ##     ## ##       ######## 
##     ## ##       ##         ## ##   ##     ## ##          ##    
##     ## ##       ##        ##   ##  ##     ## ##          ##    
##     ## ######   ######   ##     ## ##     ## ##          ##    
##     ## ##       ##       ######### ##     ## ##          ##    
##     ## ##       ##       ##     ## ##     ## ##          ##    
########  ######## ##       ##     ##  #######  ########    ##    
*/

.stocktake:not(.stocktake--s){
	height: 40px;
}

/** element : image ***********************************************************************************************************************/
.stocktake:not(.stocktake--s) .stocktake__image{
	height: 48px;
	margin-top: -6px;
	width: 48px;
}
.body--ltr .stocktake:not(.stocktake--s) .stocktake__image{
	margin-left: -16px;
	margin-right: 5px;
}
.body--rtl .stocktake:not(.stocktake--s) .stocktake__image{
	margin-left: 5px;
	margin-right: -16px;
}

/** element : text ************************************************************************************************************************/
.stocktake:not(.stocktake--s) .stocktake__text{
	font-size: 16px;
	line-height: 36px;
}

/** element : button **********************************************************************************************************************/
.stocktake:not(.stocktake--s) .stocktake__button{
	top: 6px;
}

/** element : svg ************************************************************************************************************************/
.stocktake__button__svg{
	display: block;
	font-size: 0;
	margin: 4px 4px 0;
}
.stocktake--outline .stocktake__button__svg{
	fill: #fff;
}
.stocktake:not(.stocktake--outline) .stocktake__button__svg{
	fill: #3D251B;
}

/* 
 ######  ##     ##    ###    ##       ##       
##    ## ###   ###   ## ##   ##       ##       
##       #### ####  ##   ##  ##       ##       
 ######  ## ### ## ##     ## ##       ##       
      ## ##     ## ######### ##       ##       
##    ## ##     ## ##     ## ##       ##       
 ######  ##     ## ##     ## ######## ######## 
*/

.stocktake--s{
	border-style: solid;
	border-width: 2px;
	height: 28px;
}
.body--ltr .stocktake--s .stocktake{
	padding-right: 12px;
}
.body--rtl .stocktake--s .stocktake{
	padding-left: 12px;
}

/** element : image ***********************************************************************************************************************/
.stocktake--s .stocktake__image{
	height: 32px;
	margin-top: -4px;
	width: 32px;
}
.body--ltr .stocktake--s .stocktake__image{
	margin-left: -10px;
	margin-right: 3px;
}
.body--rtl .stocktake--s .stocktake__image{
	margin-left: 3px;
	margin-right: -10px;
}

/** element : text ************************************************************************************************************************/
.stocktake--s .stocktake__text{
	font-size: 12px;
	line-height: 24px;
}

/** element : button **********************************************************************************************************************/
.stocktake--s .stocktake__button{
	top: 0;
}

/*
##     ##  #######  ########  #### ######## #### ######## ########   ######  
###   ### ##     ## ##     ##  ##  ##        ##  ##       ##     ## ##    ## 
#### #### ##     ## ##     ##  ##  ##        ##  ##       ##     ## ##       
## ### ## ##     ## ##     ##  ##  ######    ##  ######   ########   ######  
##     ## ##     ## ##     ##  ##  ##        ##  ##       ##   ##         ## 
##     ## ##     ## ##     ##  ##  ##        ##  ##       ##    ##  ##    ## 
##     ##  #######  ########  #### ##       #### ######## ##     ##  ######  
*/

/* PRIMARY + OUTLINE **********************************************************************************************************************
 ******************************************************************************************************************************************/

.stocktake--outline.stocktake--primary{
	background-color: #FDFFF0;
	border-color: #AD5B50;
}
.stocktake--outline.stocktake--primary .stocktake__button{
	background-color: #AD5B50;
	border-color: #FDFFF0;
}
a.stocktake--outline.stocktake--primary:hover{
	background-color: #AD5B50;
	border-color: #AD5B50;
}
a.stocktake--outline.stocktake--primary:hover .stocktake__button{
	background-color: #FDFFF0;
	border-color: #AD5B50;
}
a.stocktake--outline.stocktake--primary:hover .stocktake__text{
	color: #fff;
}
a.stocktake--outline.stocktake--primary:hover .stocktake__button__svg{
	fill: #3D251B;
}

/* SECONDARY + OUTLINE ********************************************************************************************************************
 ******************************************************************************************************************************************/

.stocktake--outline.stocktake--secondary{
	background-color: #FDFFF0;
	border-color: #37659A;
}
.stocktake--outline.stocktake--secondary .stocktake__button{
	background-color: #37659A;
	border-color: #FDFFF0;
}
a.stocktake--outline.stocktake--secondary:hover{
	background-color: #37659A;
	border-color: #37659A;
}
a.stocktake--outline.stocktake--secondary:hover .stocktake__button{
	background-color: #FDFFF0;
	border-color: #37659A;
}
a.stocktake--outline.stocktake--secondary:hover .stocktake__text{
	color: #fff;
}
a.stocktake--outline.stocktake--secondary:hover .stocktake__button__svg{
	fill: #3D251B;
}

/* WHITE + OUTLINE ************************************************************************************************************************
 ******************************************************************************************************************************************/

.stocktake--outline.stocktake--white{
	background-color: #FDFFF0;
	border-color: #F2EFCF;
}
.stocktake--outline.stocktake--white .stocktake__button{
	background-color: #F2EFCF;
	border-color: #FDFFF0;
}

/* IMPORTANT ******************************************************************************************************************************
 ******************************************************************************************************************************************/

.stocktake--important{
	animation: scaleCommon .25s 1 .75s ease-in-out;
}
.stocktake--important:not(.stocktake--outline){
	background-color: #EEC213;
	border-color: #EEC213;
}
.stocktake--important:not(.stocktake--outline) .stocktake__button{
	background-color: #FDFFF0;
	border-color: #EEC213;
}
a.stocktake--important:not(.stocktake--outline):hover{
	background-color: #FDFFF0;
	border-color: #EEC213;
}
a.stocktake--important:not(.stocktake--outline):hover .stocktake__button{
	background-color: #FDFFF0;
	border-color: #EEC213;
}
a.stocktake--important.stocktake--outline .stocktake__button__svg,
a.stocktake--important:not(.stocktake--outline):hover .stocktake__button__svg{
	fill: #3D251B;
}

/* IMPORTANT + OUTLINE ********************************************************************************************************************
 ******************************************************************************************************************************************/

.stocktake--outline.stocktake--important{
	background-color: #FDFFF0;
	border-color: #EEC213;
}
.stocktake--outline.stocktake--important .stocktake__button{
	background-color: #EEC213;
	border-color: #FDFFF0;
}
a.stocktake--outline.stocktake--important:hover{
	background-color: #EEC213;
	border-color: #EEC213;
}
a.stocktake--outline.stocktake--important:hover .stocktake__button{
	background-color: #FDFFF0;
	border-color: #EEC213;
}
a.stocktake--outline.stocktake--important:hover .stocktake__button__svg{
	fill: #3D251B;
}