/* -------------------------------------------------------------------------- */
/*   07-platforms/_macos.css: window buttons at the top of the rail           */
/*   (components.js moves them there). Electron only.                         */
/* -------------------------------------------------------------------------- */

.platform-macos .rail__head .window-controls {
  gap: var(--space-2);
  padding: 0 var(--space-2);
}

/* Traffic lights keep their native colours and round shape: the one place
   in the shell with non-token colours, by design. */
.platform-macos .window-controls__button {
  width: var(--space-3);
  height: var(--space-3);
  flex: 0 0 var(--space-3);
  border-radius: 50%;
}

.platform-macos .window-controls__button--close { background-color: #ff5f56; }
.platform-macos .window-controls__button--minimize { background-color: #ffbd2e; }
.platform-macos .window-controls__button--maximize { background-color: #27c93f; }

.platform-macos .window-controls__button::before {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-caption);
  line-height: 1;
  color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-hover);
}

.platform-macos .window-controls__button--close::before { content: "\00d7"; }
.platform-macos .window-controls__button--minimize::before { content: "\2212"; }
.platform-macos .window-controls__button--maximize::before { content: "+"; }

.platform-macos .window-controls:hover .window-controls__button::before,
.platform-macos .window-controls__button:focus-visible::before {
  opacity: 1;
}