/*
   Styles for the base tooltip.

   This handles the arrows and background for a tooltip. Individual xml/css
   files provide the contents for specific types of tooltips
*/

#Contents
{
    background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d2d2d ), to( #2d2d2d ) );
    padding: 12px;
    border: 2px solid black;
    margin: 0px;
	box-shadow: #00000066 -4px -4px 8px 8px;
}

#LeftArrow, #RightArrow, #TopArrow, #BottomArrow
{
    background-repeat: no-repeat;
    background-position: 0px 0px;
    
   /* The arrows sit at a higher z-index than the body of the tooltip.
      This is so that the arrow can overlap on top of the border to
      give it a more seamless look */
    z-index: 1;
    
    /* Not visible by default */
    visibility: collapse;
	
	background-size: contain;
}

#LeftArrow, #RightArrow
{
    /* Closely matches the actual image file contents, with a slightly
       smaller width so that it overlaps the body correctly. */
    width: 24px;
    height: 24px;

    /* Include a margin at the top and bottom*/
    margin-top: 4px;
    margin-bottom: 4px;
	margin-right: 4px;
}
#LeftArrow
{
    background-image: url( "file://{images}/tooltips/tooltip_arrow_left.png" );
    wash-color: #2d2d2d;
	margin-right: -5px;
}
#RightArrow
{
    background-image: url( "file://{images}/tooltips/tooltip_arrow_right.png" );
	wash-color: #2d2d2d;
	margin-left: -2px;
}

#TopArrow, #BottomArrow
{
    width: 24px;
    height: 21px;
    margin-left: 12px;
    margin-right: 12px;
}
#TopArrow
{
    background-image: url( "file://{images}/tooltips/tooltip_arrow_top.png" );
	wash-color: #2d2d2d;
	margin-bottom: -2px;
}
#BottomArrow
{
    background-image: url( "file://{images}/tooltips/tooltip_arrow_bottom.png" );
	wash-color: #2d2d2d;
	margin-top: -2px;
}

/* The code will automatically set these styles on the tooltip body, so we just need to adjust the visibility */
.TooltipContainer.LeftArrowVisible #LeftArrow
{
    visibility: visible;
}
.TooltipContainer.RightArrowVisible #RightArrow
{
    visibility: visible;
}
.TooltipContainer.TopArrowVisible #TopArrow
{
    visibility: visible;
}
.TooltipContainer.BottomArrowVisible #BottomArrow
{
    visibility: visible;
}

/* When an arrow is visible, remove the margin from that side 
   and make sure the side is big enough that the arrow doesn't look silly */
.TooltipContainer.LeftArrowVisible #Contents
{
    margin-left: 0px;
    min-height: 40px;
}
.TooltipContainer.RightArrowVisible #Contents
{
    margin-right: 0px;
    min-height: 40px;
}
.TooltipContainer.BottomArrowVisible #Contents
{
    margin-bottom: 0px;
    min-width: 60px;
}
.TooltipContainer.TopArrowVisible #Contents
{
    margin-top: 0px;
    min-width: 60px;
}

/* Flow the contents properly */
.TooltipContainer
{
    flow-children: down;

    opacity: 0.0;

    transition-property: opacity, pre-transform-scale2d;
    transition-duration: 0.175s, 0.25s;
}

.TooltipContainer.TooltipVisible
{
    opacity: 1.0;
    transition-delay: 0.0s;
}

.TooltipRow
{
    flow-children: right;
}

.GameModeTooltip.RightArrowVisible #Contents
{
	width: 400px;
	min-height: 60px;
	background-color: #3e464b;
    padding: 10px 10px 10px 15px;
    border-radius: 0px;
    border: 1px solid black;
	//border-right: 1px solid transparent;
	//box-shadow: fill #000000aa -4px -4px 8px 8px;
}

.GameModeTooltip #RightArrow
{
    background-image: url( "file://{images}/tooltips/tooltip_arrow_right.png" );
	wash-color: #3e464b;
	margin-left: -1px;
}

.SettingsTooltip #Contents
{
	max-width: 584px;
	min-width: 584px;
	margin-top: 2px;
}

.SettingsTooltip #TopArrow
{
	width: 0px;
	height: 0px;
}

.ShortTextTooltip #Contents
{
	background-color: #2d2d2d;
	padding: 8px 10px 6px 10px;
	border-radius: 0px;
	border: 1px solid black;
	box-shadow: fill #000000aa -4px -4px 8px 8px;
}

.ShortTextTooltip #RightArrow
{
	margin-left: -1px;
}

.ShortTextTooltip #LeftArrow
{
	margin-right: -1px;
}

.ShortTextTooltip #BottomArrow
{
	margin-top: -1px;
}

.ShortTextTooltip #TopArrow
{
	margin-bottom: -1px;
}

.PostGamePermanentBuffTooltip #Contents
{
	max-width: 350px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #2d2d2dfd ), to( #000000fd ) );
}