/* These values are read from code */
@define phraseOffset: 95px; /* The offset of a phrase from the center of the chat wheel */
@define defaultPhraseHeight: 35px; /* The height of each phrase */
@define heroPhraseHeight: 40px; /* The height of each phrase on the hero chat wheel */
@define arrowOffset: 60px; /* The offset of the arrow from the center of the chat wheel */
@define phraseMinimumPadding: 20px; /* The minimum padding between two chat wheel entries at the bottom below the wheel (if there's an odd number of messages) */

.MyWheel
{
	width: 100%;
	height: 450px;
	horizontal-align: center;
	vertical-align: middle;
}

.Hidden
{
	visibility: collapse;
}

#PhrasesContainer
{
	width: 100%;
	height: 100%;
}

.Phrase
{
	//horizontal-align: left;
	vertical-align: middle;
	flow-children: right;
	pre-transform-scale2d: 1.0;
	height: defaultPhraseHeight;

	transition-property: pre-transform-scale2d;
	transition-duration: 0.1s;
}

.Phrase.IsSpray
{
	height: 64px;
}

.HeroChatWheel .Phrase
{
	height: heroPhraseHeight;
}

.Phrase > Label
{
	vertical-align: middle;
	font-size: 26px;
	color: #FFFFFF;
	font-size: 26px;
	font-weight: bold;
	text-overflow: shrink;
}

.Phrase.Selected
{
	pre-transform-scale2d: 1.3;
}

@keyframes 'TextGlowPulse'
{
	0%
	{
		text-shadow: 0px 0px 6px 1.0 #AAE9A700;
	}

	50%
	{
		text-shadow: 0px 0px 6px 1.0 #AAE9A7dd;
	}

	100%
	{
		text-shadow: 0px 0px 6px 1.0 #AAE9A700;
	}
}

.Phrase.Selected > Label
{
	animation-name: TextGlowPulse;
	animation-duration: 1s;
	animation-delay: 0s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.ChatWheelSoundIcon
{
	width: 22px;
	height: 22px;

	margin-right: 4px;
	transform: translateY( 4px );

	vertical-align: middle;
	margin-top: -8px;

	background-image: url("s2r://panorama/images/hud/reborn/icon_scoreboard_mute_sound_psd.vtex");
	background-repeat: no-repeat;
	background-size: contain;
}

.Phrase.HasSound:not(.IsSpray) .ChatWheelSoundIcon
{
	visibility: visible;
}

.Phrase.HasSound.RequiresHeroBadgeTier .ChatWheelSoundIcon
{
	visibility: collapse;
}


.ChatWheelAllPrefix
{
	visibility: collapse;
}
.Phrase.SendToAllChat .ChatWheelAllPrefix
{
	visibility: visible;
}

.ChatWheelRequiredTierIcon
{
	width: 36px;
	height: 36px;

	visibility: collapse;
}

.RequiresHeroBadgeTier .ChatWheelRequiredTierIcon
{
	visibility: visible;
}

.RequiresHeroBadgeTier:not(.RequiredTierUnlocked) Label
{
	opacity: 0.3;
}

.ChatWheelRequiredTierLockIcon, .ChatWheelRequiredTierLockIconShadow
{
	vertical-align: middle;
	horizontal-align: center;

	width: 14px;
	height: 14px;

	background-image: url("s2r://panorama/images/control_icons/lock_small_png.vtex");
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.ChatWheelRequiredTierLockIconShadow
{
	transform: translate3d( 2px, 2px, 0px );
	wash-color: black;
}

.RequiredTierUnlocked .ChatWheelRequiredTierLockIcon, .RequiredTierUnlocked .ChatWheelRequiredTierLockIconShadow
{
	visibility: collapse;
}



#Wheel
{
	horizontal-align: center;
	vertical-align: middle;
	height: 164px;
	width: 164px;
}

#WheelBG
{
	background-image: url("s2r://panorama/images/chat_wheel/circle_bg_png.vtex");
    background-size: contain;
	horizontal-align: center;
	vertical-align: middle;
	height: 128px;
	width: 128px;
	margin-top: 11px;
	margin-left: 4px;
}

#WheelCenter
{
	background-image: url("s2r://panorama/images/chat_wheel/circle_png.vtex");
    background-size: contain;
	horizontal-align: center;
	vertical-align: middle;
	height: 128px;
	width: 128px;
}

#WheelBG2
{
	background-image: url("s2r://panorama/images/chat_wheel/circle_bg2_png.vtex");
    background-size: contain;
	horizontal-align: center;
	vertical-align: middle;
	height: 128px;
	width: 128px;
	visibility: collapse;
}

#WheelPointer
{
	background-image: url("s2r://panorama/images/chat_wheel/circle_pointer_png.vtex");
    background-size: contain;
	horizontal-align: center;
	vertical-align: middle;
	height: 128px;
	width: 128px;
}

#PointerContainer
{
	height: 164px;
	width: 164px;
	horizontal-align: center;
	vertical-align: middle;
	margin-left: 2px;
}

#Bubble
{
	background-image: url("s2r://panorama/images/chat_wheel/cursor_png.vtex");
	horizontal-align: center;
	vertical-align: middle;
	height: 46px;
	width: 46px;
}

#HeroImage
{
	width: 100%;
	height: 100%;

	visibility: collapse;
}

.HeroChatWheel #HeroImage
{
	visibility: visible;
}
.HeroChatWheel #Bubble
{
	background-image: none;
}


#Arrow
{
	horizontal-align: center;
	vertical-align: middle;
	height: 46px;
	width: 46px;
	margin-left: 2px;
	brightness: 2.0;
    transform: rotateZ( -90deg ) rotateX( 0deg ) translate3d( 0px, -60px, 0px );

	background-image: url("s2r://panorama/images/chat_wheel/arrow_psd.vtex");
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
}

.ChatWheelSprayImage
{
	visibility: collapse;
	height: 100%;
	width: height-percentage( 100% );
	horizontal-align: center;
	wash-color: #fff;
}

.IsSpray .ChatWheelSprayImage
{
	visibility: visible;
}

.MyTooltip
{
	horizontal-align: center;
	vertical-align: middle;
	font-size: 26px;
	color: #FFFFFF;
	font-size: 26px;
	font-weight: bold;
	margin-top: 400px;
}

.MyPhrases
{
	horizontal-align: center;
	vertical-align: center;
	height: 60px;
	width: 600px;
}

#Phrase0
{
	margin-top: -121px;
	margin-left: 0px;
}

/*
	donator_colors[1] = "#00CC00";
	donator_colors[2] = "#DAA520";
	donator_colors[3] = "#DC2828";
	donator_colors[4] = "#993399";
	donator_colors[5] = "#2F5B97";
	donator_colors[6] = "#BB4B0A";
	donator_colors[100] = "#0066FF";
	donator_colors[101] = "#641414";
	donator_colors[102] = "#871414";
*/

#PhraseLabel0
{
	color: #00CC00;
}

#Phrase0 > Panel
{
	horizontal-align: center;
}

#Phrase1
{
	margin-top: -59px;
	margin-left: 790px;
}

#Phrase2
{
	margin-top: -1px;
	margin-left: 820px;
}

#Phrase3
{
	margin-top: 115px;
	margin-left: 790px;
}

#Phrase4
{
	margin-top: 221px;
	margin-left: 0px;
}

#Phrase4 > Panel
{
	horizontal-align: center;
}

#Phrase5
{
	margin-top: 115px;
	margin-left: -400px;
}

#Phrase5 > Panel
{
	horizontal-align: right;
}

#Phrase6
{
	margin-top: -1px;
	margin-left: -430px;
}

#Phrase6 > Panel
{
	horizontal-align: right;
}

#Phrase7
{
	margin-top: -59px;
	margin-left: -400px;
}

#Phrase7 > Panel
{
	horizontal-align: right;
}

.ForWheel0
{
    transform: rotateZ( 0deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel1
{
    transform: rotateZ( 45deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel2
{
    transform: rotateZ( 90deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel3
{
    transform: rotateZ( 135deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel4
{
    transform: rotateZ( 180deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel5
{
    transform: rotateZ( 225deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel6
{
    transform: rotateZ( 270deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
}

.ForWheel7
{
    transform: rotateZ( 315deg ) rotateX( 0deg ) translate3d( 0px, 0px, 0px );
} 