@import url("s2r://panorama/styles/dotastyles.css");
@import url("file://{resources}/styles/shared/variables.css");
@import url("file://{resources}/styles/shared/panelstyles.css");

/*
pickerCombosWidth = combosWidth + thumbWidth
pickerTotalWidth = combosWidth + filtersWidth + thumbWidth + 10
pickerClosedWidth = thumbWidth
*/

@define pickerMarginTop: 100px;
@define combosWidth: 350px;
@define comboWidth: 320px;
@define filtersWidth: 240px;
@define filtersRowWidth: 220px;
@define pickerCombosWidth: 386px;
@define pickerTotalWidth: 636px;
@define pickerHeight: 80%;
@define pickerClosedWidth: 46px;
@define thumbWidth: 36px;
@define thumbHeight: 100%;

.PickerRoot {
  width: 100%;
  height: 100%;
}

#PickerSlideout {
  flow-children: right;
  align: left top;
  width: pickerTotalWidth;
  height: pickerHeight;
  margin-top: pickerMarginTop;
  transition-timing-function: ease-in-out;
  transition-duration: 0.2s;
  transition-property: width;
}

#PickerSlideout.FiltersClosed {
  width: pickerCombosWidth;
}

#PickerSlideout.DrawerClosed {
  width: pickerClosedWidth;
}

.PickerContents {
  flow-children: down;
  width: fill-parent-flow(1);
  height: 100%;
  background-image: pickerBackground;
  background-size: 100%;
}

.PickerThumb {
  width: thumbWidth;
  height: thumbHeight;
  vertical-align: center;
  background-color: pickerThumbGradient;
  border-top-right-radius: 24px;
  border-bottom-right-radius: 24px;
  box-shadow: none;
}

.PickerThumb:hover {
  background-color: pickerThumbHoverGradient;
}

.PickerThumb .PanelSlideThumbArrow {
  horizontal-align: right;
  wash-color: #666;
  transform: translateX(-9px);
}

.PickerThumb:hover .PanelSlideThumbArrow {
  wash-color: black;
  transform: translateX(-12px);
}

#PickerSlideout.DrawerClosed .PickerThumb .PanelSlideThumbArrow {
  transform: rotateZ(180deg) translateX(-9px);
}

#PickerSlideout.DrawerClosed .PickerThumb:hover .PanelSlideThumbArrow {
  transform: translateX(6px) rotateZ(180deg);
}

.PickerTitleContainer .RefreshButton {
  width: 24px;
  height: 24px;
  visibility: collapse;
  background-size: 100%;
}

.Development .PickerTitleContainer .RefreshButton {
  visibility: visible;
}

.PickerHeader {
  width: 100%;
}

.PickerFreestyleButton {
  horizontal-align: center;
  width: 170px;
  height: 50px;
  margin-top: 10px;
  background-image: invokerCardHud;
  background-repeat: no-repeat;
  background-size: 100%;
  transition-timing-function: ease-in-out;
  transition-duration: 0.18s;
  transition-property: brightness, saturation;
}

.PickerFreestyleButton:hover {
  brightness: 2;
  saturation: 1.3;
}

.PickerFreestyleButton:active {
  pre-transform-scale2d: 0.975;
}

.PickerFreestyleButton .PickerFreestyleLabel {
  align: center center;
  margin-top: 2px;
  font-weight: bold;
  color: #000;
  text-align: center;
  text-overflow: shrink;
  text-shadow: 0 0 3px 3 #0003;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.PickerFreestyleButton:hover .PickerFreestyleLabel {
  color: #ccc;
}

.PickerFiltersButton.ExpandCollapseToggleButton {
  align: right center;
  margin-right: 12px;
  wash-color: #ccc;
}

.PickerFiltersButton.ExpandCollapseToggleButton:hover {
  wash-color: #fff;
}

.PickerFiltersButton.ExpandCollapseToggleButton:selected {
  wash-color: #eee;
}

.PickerFiltersButton.ExpandCollapseToggleButton:selected .TickBox {
  transform: rotateZ(90deg);
}

.PickerBody {
  flow-children: right;
  width: 100%;
  height: 100%;
  border-top: 1px solid #000;
}

#PickerCombos {
  flow-children: down;
  width: combosWidth;
  height: 100%;
  padding: 10px 10px 10px 20px;
  overflow: noclip scroll;
}

#PickerCombos VerticalScrollBar {
  horizontal-align: left;
}

#PickerCombos .PickerCombo {
  width: comboWidth;
}

.PickerFilters {
  flow-children: down;
  width: filtersWidth;
  height: 100%;
  padding: 10px;
  overflow: noclip scroll;
}

.PickerFilters .PickerFiltersRow {
  flow-children: down;
  width: filtersRowWidth;
  margin-top: 10px;
}

.PickerFilters .PickerFiltersLabel {
  margin-bottom: 4px;
}

.PickerFilters .PickerFilterResetButton {
  width: 12px;
  height: 12px;
  padding: 0;
  margin: 0 0 0 6px;
  vertical-align: center;
  wash-color: #ff808088;
}

.PickerFilters .PickerFilterResetButton:hover {
  wash-color: #ff8080;
}

.PickerFilters .PickerFilterResetButton:disabled {
  visibility: collapse;
}

#PickerFilterTagsContainer {
  width: 100%;
}

.PickerFilters .PickerFiltersRow.PopupPickersRow {
  flow-children: right;
  margin-top: 20px;
}

.PickerFilters .PopupPickerColumn {
  flow-children: down;
  margin-right: 10px;
}

.PickerFilters .PopupPickerLabel {
  padding: 0;
  margin: 0 0 4px;
  vertical-align: center;
}

.PickerFilters .PopupPickerButton {
  flow-children: down;
  padding: 1px;
}

.PickerFilters .PopupPickerButton.PickerFilterItemButton {
  min-width: 0;
  min-height: 0;
}

#PickerFilterItemImage {
  align: center center;
  width: 40px;
  height: 40px;
}

.PickerFilters .PopupPickerButton.PickerFilterAbilityButton {
  min-width: 0;
  min-height: 0;
}

#PickerFilterAbilityImage {
  align: center center;
  width: 40px;
  height: 40px;
}

.PickerFilters .PickerFiltersRow.ButtonsRow {
  flow-children: right;
  horizontal-align: center;
  width: fit-children;
  margin-top: 30px;
}

.PickerFilters .PickerFiltersResetButton {
  min-width: 142px;
}
