#operator-dialog {
  position: relative;
  margin: unset;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0px;
}
#operator-dialog::backdrop {
  background-color: var(--color-layer-obvious);
}
#operator-dialog .dialog-header {
  display: grid;
  grid-template-columns: 25% 50% 25%;
  width: 100%;
  align-items: center;
}
#operator-dialog .dialog-content {
  padding: var(--space-300);
}

#operator-dialog .side-selector {
  --side-size: 40px;
  --inline-padding: var(--space-300);
  --block-padding: var(--space-200);
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: var(--block-padding) var(--inline-padding);
  border-radius: var(--radius-m);
  gap: var(--inline-padding);
  background-color: var(--color-layer);
  width: max-content;
}
#operator-dialog .side-selector .side {
  width: var(--side-size);
  height: var(--side-size);
}
#operator-dialog .side-selector .side:not([data-active]) {
  cursor: pointer;
}
#operator-dialog .side-selector::after {
  position: absolute;
  content: "";
  background-color: var(--color-layer-subtle);
  width: 40px;
  height: 40px;
  top: 50%;
  transform: translateY(-50%);
  padding: var(--space-0);
  border-radius: var(--radius-l);
  transition: left 250ms;
}
#operator-dialog .side-selector[data-side=attacker]::after {
  left: calc(var(--inline-padding) - var(--space-0));
}
#operator-dialog .side-selector[data-side=defender]::after {
  left: calc(100% - var(--inline-padding) - var(--side-size) - var(--space-0));
}
#operator-dialog .side-selector[data-hidden] {
  visibility: hidden;
}

#operator-dialog .operators {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--space-100) var(--space-400);
}

#operator-dialog .close-icon {
  cursor: pointer;
  position: absolute;
  top: var(--space-300);
  right: var(--space-300);
  opacity: 0.5;
}

#operator-dialog {
  --hover-transition-time: 200ms 50ms;
}
#operator-dialog h2 {
  text-transform: capitalize;
  text-align: center;
  width: 100%;
  user-select: none;
}
#operator-dialog .active-filters {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-100);
}
#operator-dialog .active-filters .clear-all-filters {
  font-size: var(--text-size-s);
}
#operator-dialog .filter-title {
  font-weight: 700;
}
#operator-dialog .two-columns {
  display: flex;
  flex-direction: row;
}
#operator-dialog .filters {
  display: flex;
  flex-direction: column;
  align-items: start;
  width: 200px;
  padding: var(--space-100);
  margin: 11.5px 0px auto 0px;
  text-align: start;
  border-radius: var(--radius-m);
  background-color: var(--color-layer);
}
#operator-dialog .filter-group {
  display: flex;
  flex-direction: column;
  align-items: start;
  padding: 0px 0px var(--space-0) var(--space-100);
  border-bottom: 1px solid var(--color-layer-obvious);
  margin-bottom: var(--space-200);
}
#operator-dialog .filter-group:last-of-type {
  border-bottom: 0px;
  margin-bottom: 0px;
}
#operator-dialog .filter-selector {
  opacity: 0.5;
  transition: opacity 250ms;
  text-transform: capitalize;
}
#operator-dialog .filter-selector[data-active] {
  opacity: 1;
  text-decoration: underline;
}
#operator-dialog .operator-select-icon {
  position: relative;
  opacity: 1;
  transform: scale(1);
  transition: transform var(--hover-transition-time), opacity var(--hover-transition-time);
}
#operator-dialog .operator-select-icon .operator-select-name {
  --text-border-width: var(--border-m);
  --text-border-color: var(--color-text);
  position: absolute;
  top: calc(50% + 37.5px);
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--text-size-m);
  font-weight: 700;
  text-transform: capitalize;
  text-align: center;
  color: var(--color-background);
  text-shadow: calc(-1 * var(--text-border-width)) 0 var(--text-border-color), 0 var(--text-border-width) var(--text-border-color), var(--text-border-width) 0 var(--text-border-color), 0 calc(-1 * var(--text-border-width)) var(--text-border-color);
}
#operator-dialog .operator-select-icon[data-disabled],
#operator-dialog .operator-select-icon[data-banned] {
  position: relative;
  pointer-events: none;
  opacity: var(--opacity-subtle);
}
#operator-dialog .operator-select-icon[data-disabled] .operator-icon.loaded,
#operator-dialog .operator-select-icon[data-banned] .operator-icon.loaded {
  filter: saturate(0);
}
#operator-dialog .operator-select-icon[data-disabled] .indicator-icon,
#operator-dialog .operator-select-icon[data-banned] .indicator-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: filter var(--hover-transition-time);
  filter: saturate(1);
}
#operator-dialog .operator-icon {
  filter: saturate(1);
  transition: filter var(--hover-transition-time);
}
#operator-dialog:has(.operator-icon.loaded > :hover), #operator-dialog:has(.operator-select-icon > .operator-select-name:hover) {
  --desaturated: 0.15;
  --scaled: 1.2;
  cursor: pointer;
}
#operator-dialog:has(.operator-icon.loaded > :hover) .operator-select-icon::after, #operator-dialog:has(.operator-select-icon > .operator-select-name:hover) .operator-select-icon::after {
  filter: saturate(var(--desaturated));
}
#operator-dialog:has(.operator-icon.loaded > :hover) .operator-select-icon:hover, #operator-dialog:has(.operator-select-icon > .operator-select-name:hover) .operator-select-icon:hover {
  transform: scale(var(--scaled));
}
#operator-dialog:has(.operator-icon.loaded > :hover) .operator-icon, #operator-dialog:has(.operator-select-icon > .operator-select-name:hover) .operator-icon {
  filter: saturate(var(--desaturated));
}
#operator-dialog:has(.operator-icon.loaded > :hover) .operator-select-icon:hover .operator-icon, #operator-dialog:has(.operator-select-icon > .operator-select-name:hover) .operator-select-icon:hover .operator-icon {
  filter: saturate(1);
}