@define shortduration: 0.25s;
@define shortmedduration: 0.3s;
@define mediumduration: 0.4s;
@define longduration: 1.7s;

/* transition duration for settings panels to opaque in/out; referred to from code so don't change the name */
@define percentbarwidth: 412px;


.IconPickerListItem
{
	background-color:  transparent_module;

	width: 128px;
	height: 128px;
	flow-children: right-wrap;
	padding: 12px;
	margin-top: 5px;
	margin-bottom: 5px;
	border-radius: 4px;
	
	transition-property: pre-transform-scale2d, position, transform, box-shadow;
	transition-duration: 0.23s;
	transition-delay: 0.0s;
	transition-timing-function: bigpicture-ease-in-out;
	pre-transform-scale2d: 0.99;
	
	box-shadow: box_shadow_off_color 0px 0px 16px 0px;
}

.IconPickerListItem.Ready {
	pre-transform-scale2d: 0.99;
}

.IconPickerListItem:descendantfocus
{
	background-color: action_module;
	pre-transform-scale2d: 1.0;

	box-shadow: box_shadow_on_color 0px 0px 16px 0px;

	animation-name: main-button-glow-movement-no-fill;
	animation-duration: longduration;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}



/* set all sections to collapse when not visible */

.IconsList
{
	border-radius: 3px;
	width: 1554px;
    height: 560px;
	flow-children: right-wrap;
    overflow: scroll;
    vertical-align: center;
    horizontal-align: center;
    margin-left: 180px;
    border: 8px solid #20304088;
	background-color: #000000ff;
}


IconPickerPanel
{
	border-radius: 3px;
	width: 1920px;
    height: 1080px;
	flow-children: right-wrap;
    overflow: scroll;
	background-color: #00000055;
}

#IconPickerColorPicker
{
	border-radius: 3px;
	width: 1920px;
    height: 1080px;
}

#IconsList
{
	overflow: clip scroll;
	flow-children: right;
	width: 100%;
    height: 100%;
	padding-bottom:100px;
}

.IconColorPicker
{
    border-radius: 3px;
	width: 100%;
    height: 100%;
	flow-children: down;
}

IconPickerListItem:descendantfocus
{
	background-color: #00000088;
	box-shadow: box_shadow_on_color -4px -4px 8px 8px;
}


.IconPickerListItem Button,
.IconPickerListItem Button Image
{
	width: 100%;
}

.ListItemImage
{
	width: 128px;
    height: 128px;
}

VerticalScrollBar {
	opacity: 0;
}
HorizontalScrollBar {
	opacity: 0;
}

#IconPreview
{
	width: 256px;
    height: 256px;
}


.IconColorPickerPanel
{
	width: 100%;
	height: 100%;
	font-size: 24px;
	font-family: platformfont;
	margin-left: 0px;

	padding-bottom: 20px;
	margin-bottom: 0px;

	transition-property: opacity, blur, pre-transform-scale2d, wash-color, transform;
	transition-duration: .3s;
	transition-timing-function: bigpicture-ease-in-out;
	background-color: #00000088;
}

.IconColorPickerBottomPanel
{
	margin-left: 170px;
	margin-top: 50px;
	width: 100%;
	height: 100%;
    vertical-align: center;
    horizontal-align: center;
    flow-children: down;
}

#IconColorPickerContent
{
	opacity: 1.0;

	padding-left: 300px;
	transition-property: opacity;
	transition-duration: 0.2s;
	transition-timing-function: bigpicture-ease-in-out;
	flow-children: right;
}

.IconColorPickerCenterContent
{
    height: 100%;
	width: 1920px;
	horizontal-align: left;
	padding-left: 300px;
}

.IconPreviewPanel
{
	vertical-align: top;
	horizontal-align: center;
	width: 256px;
	height: 256px;
    margin-top: 160px;
	border-radius: 3px;
}

.IconPickerVertContainer
{
	flow-children: down;
	vertical-align: center;
	horizontal-align: left;
	font-size: 24;
	font-family: "Motiva Sans";
	color: tclegendlabel; 
}


.colorpicker
{
	flow-children: right;
	padding: 20px;
	padding-right: 0px;
	padding-left: 0px;
}

.colorpicker Image
{
	margin-right: 12px;

	wash-color: #00000000;
}

.colorwrapper
{
	vertical-align: center;
}

.colorpicker .colorregion
{
	padding: 2px;
	vertical-align: center;

	flow-children: right;

	overflow: noclip noclip;
}

.colorpicker .colorregion Button,
.colorpicker .colorregion Button:hover
{
	z-index: 0;
	width: 40px;
	height: 40px;

	margin: 0px;

	overflow: noclip noclip;

	border-style: solid;
	border-radius: 0px;
	border-width: 3px;
	border-color: #18364900;
	box-shadow: none;

	pre-transform-scale2d: 1.0;

	transition-property: border, pre-transform-scale2d;
	transition-duration: 0.20s;
}

.colorpicker .colorregion Button:hover
{
	pre-transform-scale2d: 1.3;		
	z-index: 5;
}

#ForegroundColor:descendantfocus .colorregion Button:focus,
#ForegroundColor:descendantfocus .colorregion Button:hover,
#ForegroundColor:descendantfocus .colorregion Button.active:focus,
#ForegroundColor:descendantfocus .colorregion Button.active:hover,
#ForegroundColor:descendantfocus .colorregion Button.active:focus:hover,
#BackgroundColor:descendantfocus .colorregion Button:focus,
#BackgroundColor:descendantfocus .colorregion Button:hover,
#BackgroundColor:descendantfocus .colorregion Button.active:focus,
#BackgroundColor:descendantfocus .colorregion Button.active:hover,
#BackgroundColor:descendantfocus .colorregion Button.active:focus:hover
{
	z-index: 10;
	border-style: solid;
	border-color: #ffffffff;
	border-radius: 2px;
	pre-transform-scale2d: 1.4;
}

.colorpicker .colorregion Button.active
{
	z-index: 6;
	border-style: solid;
	border-color: #aaaaaaFF;
	border-radius: 2px;
	pre-transform-scale2d: 1.3;
}

.colorpicker .colorregion Button.active:hover
{
	pre-transform-scale2d: 1.35;
}

.colorborderwrapper
{
	z-index: -1;
}

IconPickerColorSelector .SettingsCenterContent
{
	width: 1300px;
}

.colorborder
{
	z-index: -1;
	width: 804px;
	height: 44px;
	vertical-align: center;

	border-style: solid;
	border-radius: 2px;
	border-width: 2px;
	border-color: #183649ff;
}