body {
  --control-space-top: 0px;
  --control-space-left: 0.3em;
  --control-space-right: 0.3em;
}
/* window drag regions */

.window-drag-area {
  display: none;
}

body.windows:not(.maximized):not(.fullscreen):not(.separate-titlebar),
body.linux:not(.maximized):not(.fullscreen):not(.separate-titlebar) {
  --control-space-top: 12px;
}

/* On Windows, draggable regions aren't clickable, so the drag region is a separate area above the tabstrip */
body.windows:not(.maximized):not(.fullscreen):not(.separate-titlebar) .window-drag-area,
body.linux:not(.maximized):not(.fullscreen):not(.separate-titlebar) .window-drag-area {
  display: block;
  position: fixed;
  /* leave an empty space around the edges of the drag area so that the window can be resized */
  top: 3px;
  left: 3px;
  width: calc(100% - 6px);
  height: 12px;
  -webkit-app-region: drag;
}

body.mac:not(.separate-titlebar):not(.fullscreen) .window-drag-area {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
  -webkit-app-region: drag;
}

body.mac:not(.is-edit-mode):not(.fullscreen):not(.separate-titlebar) #mac-window-drag-area {
  margin-left: calc(var(--control-space-left) * -1);
  width: calc(var(--control-space-left) + 1.25em);
  height: 100%;
  -webkit-app-region: drag;
}

/* mac window buttons */

body.mac:not(.fullscreen):not(.separate-titlebar) {
  --control-space-left: 75px;
}

body.rtl.mac:not(.fullscreen):not(.separate-titlebar) {
  --control-space-left: 0px;
  --control-space-right: 75px;
}

/* Windows caption buttions */

body.windows:not(.separate-titlebar) {
  --control-space-right: 138px;
}

.windows-caption-buttons {
  display: none;
}

body.windows:not(.separate-titlebar) .windows-caption-buttons {
  display: flex;
  position: absolute;
  top: var(--control-space-top);
  right: 0;
  z-index: 10;
}

.windows-caption-buttons .element {
  line-height: 36px;
  width: 36px;
  stroke: #000;
  padding: 0 5px;
  box-sizing: content-box;
  fill: transparent;
  text-align: center;
}

body:not(.task-overlay-is-shown).dark-theme .windows-caption-buttons .element {
  stroke: #fff;
}

.windows-caption-buttons .element > svg {
  width: 12px;
  height: 12px;
}

.windows-caption-buttons .element {
  transition: background-color 0.1s linear, color 0.1s linear;
}
.windows-caption-buttons .element:hover {
  background-color: rgba(196, 196, 196, 0.4);
  transition: none;
}
.windows-caption-buttons .element:active {
  background-color: rgba(168, 168, 168, 0.5);
}
.windows-caption-buttons .element.caption-close:hover {
  background-color: #e81123;
}
.windows-caption-buttons .element.caption-close:hover > svg,
.windows-caption-buttons .element.caption-close:active > svg {
  stroke: #fff;
  stroke-width: 1.1px;
}
.windows-caption-buttons .element.caption-close:active {
  background-color: rgba(232, 17, 35, 0.6);
}

/* Linux buttons */

#linux-control-buttons {
  display: none;
}

body.linux:not(.separate-titlebar) {
  --control-space-right: 96px;
}

body.linux:not(.separate-titlebar) #linux-control-buttons {
  display: block;
  position: absolute;
  top: calc(9px + var(--control-space-top));
  right: 9px;
  z-index: 9;
  width: 76px;
}

body.task-overlay-is-shown #linux-control-buttons {
  color: black !important;
}

body.dark-mode.task-overlay-is-shown #linux-control-buttons {
  color: white !important;
}

#linux-control-buttons .button-background {
  fill: currentColor;
  stroke: currentColor;
  fill-opacity: 0;
  stroke-opacity: 0;
}

#linux-control-buttons g:hover .button-background {
  fill-opacity: 0.02;
  stroke-opacity: 0.09;
}

#linux-control-buttons g:active .button-background {
  fill-opacity: 0.18;
  stroke-opacity: 0.24;
}

.dark-theme #linux-control-buttons g:hover .button-background {
  fill-opacity: 0.2;
  stroke-opacity: 0.35;
}

.dark-theme #linux-control-buttons g:active .button-background {
  fill-opacity: 0.45;
  stroke-opacity: 0.7;
}
