/* Поведение окон: список всплывает и не двигает сетку.
   Цвета и длительность анимации задаёт skin.css.
   В этом файле не меняют положение кнопок в странице. */

/* Dropdowns (patch list, and the same menu shape elsewhere) unfold downward.
   Opening the control turns it the acid accent; a chosen row does the same. */
html.rd body .patchPickerMenu {
  transform-origin: top left;
  transition: opacity var(--skin-open-out), transform var(--skin-open);
}
html.rd body .patchPickerMenu.hidden {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px) scaleY(0.96);
  max-height: 0;
  overflow: hidden;
  padding: 0;
  border-width: 0;
  pointer-events: none;
}
html.rd body .patchPickerItem:hover,
html.rd body .patchPickerItem--active { background: var(--rd-signal); color: var(--rd-on-signal); }
html.rd body select:focus {
  background: var(--rd-signal);
  color: var(--rd-on-signal);
  border-color: var(--rd-signal);
}
html.rd body details[open] > summary { background: var(--rd-signal); color: var(--rd-on-signal); }

/* Option panels unfold downward: light gray while shut, a darker gray once open.
   The same motion covers the patch list, the game switch, and the suggestion
   lists under team names, tournaments and heroes. */
html.rd body .patchPickerBtn,
html.rd:not([data-rd-theme="bios"]) body .patchPickerBtn,
html.rd[data-rd-theme="bios"] body .patchPickerBtn {
  background: var(--skin-closed);
  border-color: var(--skin-closed);
  color: var(--skin-closed-text);
}
html.rd body .patchPickerBtn:hover:not(:disabled),
html.rd:not([data-rd-theme="bios"]) body .patchPickerBtn:hover:not(:disabled) {
  background: var(--skin-closed);
  border-color: var(--skin-closed);
  color: var(--skin-closed-text);
}
html.rd body .patchPickerBtn[aria-expanded="true"],
html.rd body .patchPickerBtn[aria-expanded="true"]:hover:not(:disabled),
html.rd:not([data-rd-theme="bios"]) body .patchPickerBtn[aria-expanded="true"],
html.rd:not([data-rd-theme="bios"]) body .patchPickerBtn[aria-expanded="true"]:hover:not(:disabled) {
  background: var(--skin-window);
  border-color: var(--skin-window);
  color: var(--skin-window-text);
}
html.rd body :is(.patchPickerMenu, .ac-list, .gameSwitchMenu, .gameSwitcherMenu) {
  transform-origin: top center;
  background: var(--skin-window);
  border-color: var(--skin-window-edge);
  color: var(--skin-window-text);
  box-shadow: none;
  transition: transform var(--skin-open), opacity var(--skin-open-out), visibility 0s linear;
}
html.rd body :is(.patchPickerMenu, .ac-list, .gameSwitchMenu, .gameSwitcherMenu).hidden {
  display: block !important;
  visibility: hidden;
  opacity: 0;
  transform: scaleY(0);
  overflow: hidden;
  pointer-events: none;
  transition: transform var(--skin-open), opacity var(--skin-open-out), visibility 0s linear var(--skin-open);
}
html.rd body .patchPickerItem,
html.rd body .ac-item,
html.rd body .gameSwitchMenu a,
html.rd body .gameSwitcherMenu a { color: var(--skin-window-text); }
html.rd body .patchPickerItem:hover,
html.rd body .patchPickerItem--active,
html.rd body .ac-item:hover,
html.rd body .ac-item--active,
html.rd body .gameSwitchMenu a:hover,
html.rd body .gameSwitcherMenu a:hover {
  background: var(--skin-window-line);
  color: var(--skin-window-on);
}
@media (prefers-reduced-motion: reduce) {
  html.rd body :is(.patchPickerMenu, .ac-list, .gameSwitchMenu, .gameSwitcherMenu) { transition: none; }
}

/* One selection box. Closed, it is a frame that turns green on hover.
   Open, the same frame is the frame of the whole list: the list floats,
   so the row under it does not move. The line under the closed face is
   the same 1px line that separates the options, not the 2px field border. */
html.rd body .slideSelect {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 40px;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border: 2px solid var(--rd-line);
  background: var(--rd-bg);
  color: var(--rd-text);
  box-shadow: none;
}
html.rd body .slideSelect:hover,
html.rd body .slideSelect:has(.slideSelectBtn[aria-expanded="true"]) {
  border-color: var(--rd-signal);
  z-index: 40;
}
html.rd body .slideSelect:has(.slideSelectBtn[aria-expanded="true"]) {
  background: var(--skin-window);
  color: var(--skin-window-text);
}
html.rd body .rankPicker .slideSelect { width: 188px; flex: 0 0 188px; }
html.rd body .tier1Controls .draftControlLabel .slideSelect { max-width: 280px; }
@media (max-width: 700px) {
  html.rd body .tier1Controls .draftControlLabel .slideSelect { max-width: none; }
}
html.rd body select.slideSelectNative {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
html.rd body .slideSelectBtn,
html.rd body .slideSelectBtn:hover:not(:disabled),
html.rd body .slideSelectItem,
html.rd body .slideSelectItem:hover:not(:disabled) {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
  color: inherit;
  font: 600 0.88rem/1 var(--rd-mono);
  letter-spacing: 0;
  text-align: left;
  text-transform: none;
  white-space: nowrap;
  cursor: pointer;
}
html.rd body .slideSelectBtn { height: 100%; padding-right: 18px; }
html.rd body .slideSelectBtn::after {
  content: "▾";
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
html.rd body .slideSelectMenu {
  position: absolute;
  left: -2px;
  top: calc(100% - 2px);
  z-index: 5;
  display: block;
  box-sizing: border-box;
  width: calc(100% + 4px);
  max-height: 220px;
  overflow: auto;
  margin: 0;
  border: 2px solid var(--rd-signal);
  border-top: 0;
  background: var(--skin-window);
  transform: none;
  opacity: 1;
  visibility: visible;
  transition: max-height var(--skin-menu);
}
html.rd body .slideSelectMenu.hidden {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  border-width: 0;
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: none;
}
html.rd body .slideSelectTray { overflow: hidden; }
html.rd body .slideSelectItem { border-top: 1px solid var(--skin-window-line); }
html.rd body .slideSelectItem:hover:not(:disabled),
html.rd body .slideSelectItem--active { background: var(--skin-window-line); color: var(--skin-window-on); }
/* A slot's closed control is only the digit. Open, the button and the list
   share one wider frame that floats over the player and hero fields. */
html.rd body .slot .slideSelect:not(.slideSelect--icons):has(.slideSelectBtn[aria-expanded="true"]),
html.rd body .draftHeroSlot .slideSelect:not(.slideSelect--icons):has(.slideSelectBtn[aria-expanded="true"]) {
  border-color: transparent;
  background: transparent;
}
html.rd body .slot .slideSelect:not(.slideSelect--icons):has(.slideSelectBtn[aria-expanded="true"]) .slideSelectBtn,
html.rd body .draftHeroSlot .slideSelect:not(.slideSelect--icons):has(.slideSelectBtn[aria-expanded="true"]) .slideSelectBtn {
  position: absolute;
  left: -2px;
  top: -2px;
  z-index: 2;
  width: max(calc(100% + 4px), 168px);
  height: calc(100% + 4px);
  border: 2px solid var(--rd-signal);
  border-bottom: 0;
  background: var(--skin-window);
  color: var(--skin-window-text);
}
html.rd body .slot .slideSelect:not(.slideSelect--icons) .slideSelectMenu,
html.rd body .draftHeroSlot .slideSelect:not(.slideSelect--icons) .slideSelectMenu {
  top: calc(100% + 2px);
  width: max(calc(100% + 4px), 168px);
}
html.rd body .slideSelect--icons .slideSelectBtn,
html.rd body .slideSelect--icons .slideSelectBtn:hover:not(:disabled),
html.rd body .slideSelect--icons .slideSelectItem,
html.rd body .slideSelect--icons .slideSelectItem:hover:not(:disabled) { justify-content: center; padding: 0; }
html.rd body .slideSelect--icons .slideSelectBtn::after { content: none; }
html.rd body .slideSelect--icons .roleMenuIcon { width: 22px; height: 22px; display: block; }
@media (prefers-reduced-motion: reduce) {
  html.rd body .slideSelectMenu { transition: none; }
}

/* Suggestion lists use the same open frame as the position list: one green
   border around the field and the options, the list floating so the slots
   stay put, and a 1px line between the field and the first option — the
   same line that sits between the options. */
html.rd body .slot input,
html.rd body .draftHeroSlot input {
  height: 40px;
  box-sizing: border-box;
  padding: 0 12px;
}
html.rd body .ac-wrap:has(> .ac-list:not(.hidden)) { z-index: 40; }
html.rd body .ac-list {
  left: 0;
  right: auto;
  top: calc(100% - 2px);
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  border: 2px solid var(--rd-signal);
  border-top: 0;
  background: var(--skin-window);
  color: var(--skin-window-text);
}
html.rd body .slot .ac-list,
html.rd body .draftHeroSlot .ac-list { top: 38px; }
html.rd body .ac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-top: 1px solid var(--skin-window-line);
  font: 600 0.88rem/1 var(--rd-mono);
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
html.rd body .ac-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
html.rd body .ac-label img { width: 22px; height: 22px; margin-right: 8px; vertical-align: -6px; }
html.rd body .ac-sub { flex: 0 1 auto; max-width: 46%; overflow: hidden; text-overflow: ellipsis; color: var(--skin-muted); font-weight: 500; }
html.rd body .ac-wrap:has(> .ac-list:not(.hidden)) > input,
html.rd body .ac-wrap:has(> .ac-list:not(.hidden)) > input:hover,
html.rd body .ac-wrap:has(> .ac-list:not(.hidden)) > input:focus {
  background: var(--skin-window);
  color: var(--skin-window-text);
  border-color: var(--rd-signal);
  box-shadow: none;
}