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

Documentation : https://www.dev.equideow.com/doc/bow#anchor-stickout
************************************************************************************************************************************
************************************************************************************************************************************
*/

.stickout{
	position: relative;
	text-align: center;
	cursor: default;
	display: block;
}
.stickout,
.stickout:hover{
	text-decoration: none;
}
.stickout::before{
	border-color: transparent;
	border-radius: 8px;
	border-style: solid;
	border-width: 2px;
	bottom: 0;
	left: 0;
	overflow: hidden;
	right: 0;
	transition: all .25s ease-in-out;
	top: 0;
	z-index: 1;
}
.stickout::after {
    border-radius: 50%;
    bottom: 0;
    box-shadow: 0 0 15px rgba(0, 0, 0, .3);
    height: 10px;
    left: 30px;
    width: calc(100% - 60px);
    z-index: 0;
}
.stickout::after,
.stickout::before {
    content: "";
    display: block;
    position: absolute;
}
a.stickout,
button.stickout{
	cursor: pointer;
}
a.stickout:hover:not(.stickout--checked):not(.js-stickout--selectable):not(.js-stickout--selected)::before,
button.stickout:hover:not(.stickout--checked):not(.js-stickout--selectable):not(.js-stickout--selected)::before{
    box-shadow: 0 0 30px 0 rgba(0,0,0,.3);
}

/* ELEMENT : BLOCK__CONTENT ********************************************************************************************************/
/***********************************************************************************************************************************/

.stickout__content{
	padding: 0 10px;
	position: relative;
	z-index: 1;
}

/* ELEMENT : RIBBON ****************************************************************************************************************/
/***********************************************************************************************************************************/

.stickout__ribbon{
	border-radius: 0 0 8px 8px;
	bottom: 0px;
	color: #fff;
	display: block;
	font-size: 12px;
	left: 0;
	padding: 8px 0 4px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	z-index: 1;
}
.stickout__ribbon::before{
	content: "";
	display: block;
	position: absolute;
	width: calc(100% - 4px);
	left: 2px;
	height: 4px;
	border-radius: 0 0 4px 4px;
	top: 0;
}

/* MODIFIER : XL *******************************************************************************************************************/
/***********************************************************************************************************************************/

.stickout--xl .stickout__content__image{
	height: 192px;
	margin-top: -96px;
	width: 192px;
}
body.animation .stickout--xl.stickout--success .stickout__content__image{
	animation: animateBreath 20s infinite linear;
}
.stickout--xl .stickout__content{
	margin-top: 96px;
}

/* MODIFIER : L ********************************************************************************************************************/
/***********************************************************************************************************************************/

.stickout--l .stickout__content__image{
	height: 128px;
	margin-top: -64px;
	width: 128px;
}
.stickout--l .stickout__content{
	margin-top: 64px;
}

/* MODIFIER : CHECKED **************************************************************************************************************/
/***********************************************************************************************************************************/

a.stickout--checked{
	cursor: default;
}
.stickout--checked::before{
	border-color: #849644;
}
.stickout--checked .stickout__ribbon{
	background-color: #849644;
}
.stickout--checked .stickout__content::before{
	background-color: #849644;
	background-image: url(data:image/svg+xml;base64,PHN2ZyBmaWxsPSIjZmZmZmZmIiB2aWV3Qm94PSIwIDAgNDggNDgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTQzLjYzIDguMmE0LjE0IDQuMTQgMCAwIDAtNi4wNSAwLjI0TDE4LjUyIDI5Ljk2bC04LjEtOC42M2E0LjE0IDQuMTQgMCAwIDAtNi4wNS0wLjI0IDQuNyA0LjcgMCAwIDAtMC4yNCA2LjM3TDE1LjEgMzkuMTRhNC4xNiA0LjE2IDAgMCAwIDIuNTYgMS43NWgwLjAyYTQuMDEgNC4wMSAwIDAgMCAxLjI1IDAuMSA0IDQgMCAwIDAgMC42Mi0wLjFoMC4wMWE0LjE2IDQuMTYgMCAwIDAgMi42LTEuODNsMjEuNy0yNC40OWE0LjcgNC43IDAgMCAwLTAuMjMtNi4zNyI+PC9wYXRoPjwvc3ZnPg==);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	border-radius: 50%;
	content: "";
	display: block;
	height: 32px;
	position: absolute;
	pointer-events: none;
	right: -14px;
	top: -14px;
	width: 32px;
	z-index: 2;     
}

/* MODIFIER : SUCCESS **************************************************************************************************************/
/***********************************************************************************************************************************/

.stickout--success::before{
	background-image: url(/media/equideo/image/components/block/block-success.jpg);
	background-position: center 640px;
}
.stickout--success .stickout__content::before{
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: .5s;
	background: radial-gradient(circle at center, #eec213 0, transparent 70%);
	content: "";
	display: block;
	height: 192px;
	left: calc(50% - 96px);
	pointer-events: none;
	position: absolute;
	top: -96px;
	width: 192px;
	z-index: -1;
}
.stickout--success .stickout__content::after{
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(32);	
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	display: block;
	position: absolute;
	z-index: 1;
	height: 256px;
	left: calc(50% - 128px);
	top: -128px;
	width: 256px;
}
body.animation .stickout--success .stickout__content::after{
	content: "";
	animation-name: animateSparkes;
}

/** success for XL *********************************************************************************************************************/
body.animation .stickout--success.stickout--xl .stickout__content::before{
	animation-name: spinSuccessXL;
}
.stickout--success.stickout--xl .stickout__content::after{
	transform: scale(.75);
}
@keyframes spinSuccessXL{
	100%{
		transform: scale(1.3);
	}
}
/** success for L **********************************************************************************************************************/
.stickout--success.stickout--l .stickout__content::after{
	transform: scale(.5);
}
body.animation .stickout--success.stickout--l .stickout__content::before{
	animation-name: spinSuccessL;
	transform: scale(.5);
}
@keyframes spinSuccessL{
	100%{
		transform: scale(.75);
	}
}


/* MODIFIER : BLOCK--SELECTABLE ********************************************************************************************************/
/***************************************************************************************************************************************/

.js-stickout--selectable::after{
    display: none;
}
.js-stickout--selectable:hover::before{
	box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30), 0 0 0 5px rgba(0,0,0,0.10);
}
.js-stickout--selectable::before{
    border: 1px solid #AF9C8C;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
    transition: none;
}

/* MODIFIER : BLOCK--SELECTABLE ********************************************************************************************************/
/***************************************************************************************************************************************/

.stickout.js-stickout--selectable::after{
    display: none;
}
.stickout.js-stickout--selectable::before{
    border: 1px solid #AF9C8C;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
    transition: none;
}
.stickout.js-stickout--selectable:hover::before{
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30), 0 0 0 4px rgba(0,0,0,0.10);
}

/* MODIFIER : BLOCK--SELECTED **********************************************************************************************************/
/***************************************************************************************************************************************/

.stickout.js-stickout--selected{
    cursor: default;
}
.stickout.js-stickout--selected::before{
    border-width: 2px 2px 6px 2px;;
    border-style: solid;
    border-color: #37659A;
    box-shadow: inset 0 4px 8px 0 rgba(0,0,0,0.30);
    transition: none;
}

/* MODIFIERS : RARITIES ************************************************************************************************************/
/***********************************************************************************************************************************/

.stickout--common::before,
.stickout--rare::before,
.stickout--legendary::before,
.stickout--divine::before{
	border-radius: 8px;
}
.stickout--common .stickout__content,
.stickout--rare .stickout__content,
.stickout--legendary .stickout__content,
.stickout--divine .stickout__content{
	padding-bottom: 30px;
}

/** common *************************************************************************************************************************/
.stickout--common::before{
	border-color: #AF9C8C;
}
.stickout--common .stickout__ribbon{
	background-color: #AF9C8C;
}

/** rare ***************************************************************************************************************************/
.stickout--rare::before{
	border-color: #25cda3;
}
.stickout--rare .stickout__ribbon{
	background-color: #25cda3;
}

/** legendary **********************************************************************************************************************/
.stickout--legendary::before{
	border-color: #ee8c13;
}
.stickout--legendary .stickout__ribbon{
	background-color: #ee8c13;
}

/** divine *************************************************************************************************************************/
.stickout--divine::before{
	border-color: #7C4D81;
}
.stickout--divine .stickout__ribbon{
	background-color: #7C4D81;
}