@define-color accent_bg_color @blue_3;
@define-color accent_fg_color white;
:root {
  --accent-blue: #3584e4;
  --accent-teal: #2190a4;
  --accent-green: #3a944a;
  --accent-yellow: #c88800;
  --accent-orange: #ed5b00;
  --accent-red: #e62d42;
  --accent-pink: #d56199;
  --accent-purple: #9141ac;
  --accent-slate: #6f8396;
  --accent-bg-color: var(--accent-blue);
  --accent-fg-color: @accent_fg_color;
  --window-bg-color: @window_bg_color;
  --headerbar-bg-color: @headerbar_bg_color;
}

notebook > header {
  background-color: var(--window-bg-color);
}

.osd, .osd button {
  border-radius: 24px;
}
.osd button {
  margin: 2px;
}

headerbar.default-decoration windowcontrols > button {
  margin: 0 1px;
}
headerbar.default-decoration windowcontrols > button > image {
  padding: 4px;
}
headerbar.default-decoration windowcontrols.start {
  margin-left: 3px;
}
headerbar.default-decoration windowcontrols.end {
  margin-right: 3px;
}

.background.chromium {
  background-color: var(--window-bg-color);
}
@media (prefers-color-scheme: dark) {
  .background.chromium {
    background-color: hsl(from var(--headerbar-bg-color) h calc(s * 1.2) calc(l * 1.2));
  }
}
.background.chromium selection, .background.chromium selection:focus {
  background-color: color-mix(in srgb, var(--accent-bg-color) 30%, transparent);
  color: var(--accent-fg-color);
}
.background.chromium windowcontrols > button {
  background-color: color-mix(in srgb, currentColor 10%, transparent);
  min-width: 24px;
  padding: 0;
  box-shadow: none;
  border-radius: 100%;
  margin: 0 4px;
  transition: background 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.background.chromium windowcontrols > button:hover {
  background-color: color-mix(in srgb, currentColor 15%, transparent);
}
.background.chromium windowcontrols > button:active {
  background-color: color-mix(in srgb, currentColor 30%, transparent);
}

tooltip.background.chromium {
  background-color: RGB(0 0 6/80%);
}