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

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 : IMAGEPATH HTML *******************************************************************************************************/
/***********************************************************************************************************************************/

.stickout__content__image--html{
	display: inline-block;
	overflow: hidden;
}

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

.stickout--xl .stickout__content__image{
	height: 192px;
	margin-top: -96px;
	width: 192px;
}
.stickout--xl .stickout__content__image.horsesprite{
	background-size: 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__image.horsesprite{
	background-size: 128px;
}
.stickout--l .stickout__content{
	margin-top: 64px;
}

/* MODIFIER : M ********************************************************************************************************************/
/***********************************************************************************************************************************/

.stickout--m .stickout__content__image {
	height: 96px;
	margin-top: -48px;
	width: 96px;
}

.stickout--m .stickout__content__image.horsesprite {
	background-size: 96px;
}

.stickout--m .stickout__content {
	margin-top: 48px;
}

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

a.stickout--checked{
	cursor: default;
}
.stickout--checked::before{
	border-color: #849644;
	background: linear-gradient(to bottom, #edfda4 0, #EDFDA4 10px, #FDFFF0 50px, #FDFFF0 100%);
}
.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;
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
.stickout--checked.stickout--xl .stickout__content::before,
.stickout--checked.stickout--l .stickout__content::before{
	width: 32px;
	height: 32px;
	right: 10px;
	top: 10px;
}
.stickout--checked.stickout--m .stickout__content::before {
	background-size: 12px;
	width: 24px;
	height: 24px;
	right: 10px;
	top: 10px;
}
/* MODIFIER : DISABLED **************************************************************************************************************/
/***********************************************************************************************************************************/

a.stickout--disabled{
	cursor: default;
}
.stickout--disabled::before{
	border-color: #D0D0D0;
}
.stickout--disabled .stickout__ribbon{
	background-color: #D0D0D0;
}
.stickout--disabled .stickout__content::before{
	background-color: #D0D0D0;
    background-image: url(data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2048%2048%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23949494%22%20d%3D%22m20.79976%2029.83375c0-1.8425%201.4315284-3.33375%203.20024-3.33375s3.20024%201.49125%203.20024%203.33375c0%201.175-.5843708%202.20875-1.4651268%202.8%200%200%20.3131844%201.96625.6647668%204.28375%200%20.69125-.5351732%201.24875-1.19994%201.24875h-2.39988c-.6647668%200-1.19994-.5575-1.19994-1.24875l.6647668-4.28375c-.880756-.59125-1.4651268-1.62625-1.4651268-2.8zm-3.19904-9.1675v-5.8325c0-3.68375%202.8630568-6.66625%206.39928-6.66625%203.5350232%200%206.39928%202.9825%206.39928%206.66625v5.8325zm-4.0006-5.8325v5.8325h-2.39988c-1.76871158%200-3.20024%201.49125-3.20024%203.33375v16.6675c0%201.84125%201.43152842%203.3325%203.20024%203.3325h25.59952c1.7675116%200%203.20024-1.49125%203.20024-3.3325v-16.6675c0-1.8425-1.4327284-3.33375-3.20024-3.33375h-2.39988v-5.8325c0-5.98375-4.6569671-10.83375-10.39988-10.83375s-10.39988%204.85-10.39988%2010.83375z%22%2F%3E%3C%2Fsvg%3E);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 16px;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	pointer-events: none;
	z-index: 2;
}
.stickout--disabled.stickout--xl .stickout__content::before,
.stickout--disabled.stickout--l .stickout__content::before{
	width: 32px;
	height: 32px;
	right: 10px;
	top: 10px;
}
.stickout--disabled.stickout--m .stickout__content::before {
	background-size: 12px;
	width: 24px;
	height: 24px;
	right: 10px;
	top: 10px;
}
/* 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);
	}
}
/** success for M **********************************************************************************************************************/
.stickout--success.stickout--m .stickout__content::after {
	transform: scale(.5);
}

body.animation .stickout--success.stickout--m .stickout__content::before {
	animation-name: spinSuccessM;
	transform: scale(.25);
}

@keyframes spinSuccessM {
	100% {
		transform: scale(.25);
	}
}


/* 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 : RIBBON **************************************************************************************************************/
/***********************************************************************************************************************************/
/**/
.stickout--common::before,
.stickout--rare::before,
.stickout--precious::before,
.stickout--divine::before,
.stickout--pack::before,
.stickout--gamemode::before,
.stickout--contest::before,
.stickout--other::before,
.stickout--offers::before{
	border-radius: 8px;
}
.stickout--common .stickout__content,
.stickout--rare .stickout__content,
.stickout--precious .stickout__content,
.stickout--divine .stickout__content,
.stickout--pack .stickout__content,
.stickout--gamemode .stickout__content,
.stickout--contest .stickout__content,
.stickout--other .stickout__content,
.stickout--offers .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--precious::before{
	border-color: #ee8c13;
}
.stickout--precious .stickout__ribbon{
	background-color: #ee8c13;
}

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

/** packs *************************************************************************************************************************/
.stickout--pack::before{
	border-color: #5FC34E;
}
.stickout--pack .stickout__ribbon{
	background-color: #5FC34E;
}

/** gamemode *************************************************************************************************************************/
.stickout--gamemode::before{
	border-color: #3F56BE;
}
.stickout--gamemode .stickout__ribbon{
	background-color: #3F56BE;
}

/** contest *************************************************************************************************************************/
.stickout--contest::before{
	border-color: #AE34CD;
}
.stickout--contest .stickout__ribbon{
	background-color: #AE34CD;
}

/** other *************************************************************************************************************************/
.stickout--other::before{
	border-color: #9E2619;
}
.stickout--other .stickout__ribbon{
	background-color: #9E2619;
}

/** offers *************************************************************************************************************************/
.stickout--offers::before{
	border-color: #B75802;
}
.stickout--offers .stickout__ribbon{
	background-color: #B75802;
}