/* Single authoritative traffic-light state layer. */
.window .traffic-lights {
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 1px;
  pointer-events: auto;
}

.window > .titlebar .traffic-lights {
  position: relative;
}

.window .traffic-lights > .dot {
  display: block;
  width: 18px;
  height: 24px;
  min-width: 18px;
  min-height: 24px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  appearance: none;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px 12px;
  pointer-events: auto;
  cursor: default;
  touch-action: manipulation;
}

/* State 1: every light is neutral while its window is inactive. */
.window:not(.focused) .traffic-lights > .dot {
  background-image: url('../assets/traffic-lights/unfocused.svg');
}

/* State 2: the active window shows the normal red, yellow and green set. */
.window.focused .traffic-lights > .close {
  background-image: url('../assets/traffic-lights/close/default.svg');
}

.window.focused .traffic-lights > .minimize {
  background-image: url('../assets/traffic-lights/minimize/default.svg');
}

.window.focused .traffic-lights > .maximize {
  background-image: url('../assets/traffic-lights/maximize/default.svg');
}

/* State 3: entering any part of the cluster changes all three lights together. */
.window .traffic-lights:hover > .close {
  background-image: url('../assets/traffic-lights/close/hover.svg');
}

.window .traffic-lights:hover > .minimize {
  background-image: url('../assets/traffic-lights/minimize/hover.svg');
}

.window .traffic-lights:hover > .maximize {
  background-image: url('../assets/traffic-lights/maximize/hover.svg');
}

/* A maximized window cannot be minimized in this desktop model. Keep yellow
   neutral in both the default and group-hover states. */
.window.maximized .traffic-lights > .minimize:disabled,
.window.maximized .traffic-lights:hover > .minimize:disabled {
  background-image: url('../assets/traffic-lights/unfocused.svg') !important;
  cursor: default;
}

/* System Settings has no minimize or fullscreen state. Both unavailable
   actions remain circular neutral lights, including on group hover. */
#settings-window .traffic-lights > :is(.minimize, .maximize):disabled,
#settings-window .traffic-lights:hover > :is(.minimize, .maximize):disabled {
  background-image: url('../assets/traffic-lights/disabled.svg') !important;
  cursor: default;
}

/* Fixed dialog cards only expose Close; the other two lights stay neutral. */
.window.fixed-dialog .traffic-lights > .disabled-dot,
.window.fixed-dialog .traffic-lights:hover > .disabled-dot {
  background-image: url('../assets/traffic-lights/unfocused.svg');
  cursor: default;
}