/*
  Copyright (c) 2021-2026 Littleton Robotics
  http://github.com/Mechanical-Advantage

  Use of this source code is governed by a BSD
  license that can be found in the LICENSE file
  at the root directory of this project.
*/

body {
  font-family:
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont;
  color: #222;
  user-select: none;
}

@media (prefers-color-scheme: dark) {
  body {
    color: #eee;
  }

  a {
    color: #58a7ff;
  }
}

img {
  -webkit-user-drag: none;
}

:focus-visible:not(input) {
  outline: 2px solid #446ce3;
  border-radius: 3px;
  z-index: 99;
}

input:focus-visible {
  outline: none;
}

[tabindex="-1"]:focus-visible,
[tabindex="-1"]:focus {
  outline: none;
}

/* Buttons */

button {
  position: relative;
  padding: 0px;
  background-color: transparent;
  border: none;
  border-radius: 6px;
}

button > img {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(100%);

  pointer-events: none;

  /* https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(32%) sepia(0%) saturate(60%) hue-rotate(224deg) brightness(100%) contrast(95%);
}

button > object {
  position: absolute;
  max-height: 100%;
  max-width: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(75%);

  pointer-events: none;
}

button.blurred > img,
button:disabled > img {
  /* https://codepen.io/sosuke/pen/Pjoqqp */
  filter: invert(82%) sepia(3%) saturate(20%) hue-rotate(339deg) brightness(84%) contrast(86%);
}

button:not(:disabled):hover {
  background-color: #eee;
}

button:not(:disabled):active {
  background-color: #ddd;
}

@media (prefers-color-scheme: dark) {
  button > img {
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(75%) sepia(0%) saturate(0%) hue-rotate(138deg) brightness(83%) contrast(81%);
  }

  button.blurred > img,
  button:disabled > img {
    /* https://codepen.io/sosuke/pen/Pjoqqp */
    filter: invert(30%) sepia(11%) saturate(12%) hue-rotate(104deg) brightness(104%) contrast(93%);
  }

  button:not(:disabled):hover {
    background-color: #333;
  }

  button:not(:disabled):active {
    background-color: #444;
  }
}

/* Keep channel values aligned in the hub and satellite renderers. */
body {
  font-variant-numeric: tabular-nums;
}

/* MUR form controls: flat, token-based replacements for native checkbox / radio / select */

:root {
  --mv-control-bg: #fff;
  --mv-control-border: #767676;
  --mv-control-fg: #222;
  --mv-control-accent: #446ce3;
}
@media (prefers-color-scheme: dark) {
  :root {
    --mv-control-bg: #2a2a2a;
    --mv-control-border: #8a8a8a;
    --mv-control-fg: #eee;
    --mv-control-accent: #6c8cf0;
  }
}
input.mv-checkbox,
input.mv-radio {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  margin: 0 4px;
  padding: 0;
  vertical-align: middle;
  box-sizing: border-box;
  background: var(--mv-control-bg);
  border: 1px solid var(--mv-control-border);
  border-radius: 3px;
  position: relative;
}
input.mv-radio {
  border-radius: 50%;
}
input.mv-checkbox:checked,
input.mv-radio:checked {
  background: var(--mv-control-accent);
  border-color: var(--mv-control-accent);
}
input.mv-checkbox:checked::after {
  content: "";
  position: absolute;
  left: 3.5px;
  top: 0.5px;
  width: 3px;
  height: 7px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input.mv-radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: #fff;
}
input.mv-checkbox:focus-visible,
input.mv-radio:focus-visible,
select.mv-select:focus-visible {
  outline: 2px solid var(--mv-control-accent);
  outline-offset: 1px;
}
input.mv-checkbox:disabled,
input.mv-radio:disabled,
select.mv-select:disabled {
  opacity: 0.5;
}
select.mv-select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  min-height: 22px;
  padding: 2px 22px 2px 6px;
  font: inherit;
  font-size: 12px;
  color: var(--mv-control-fg);
  background-color: var(--mv-control-bg);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 11px) 50%,
    calc(100% - 7px) 50%;
  background-size:
    4px 4px,
    4px 4px;
  background-repeat: no-repeat;
  border: 1px solid var(--mv-control-border);
  border-radius: 4px;
}
select.mv-select option {
  background: var(--mv-control-bg);
  color: var(--mv-control-fg);
}
div.connect-dialog input.mv-checkbox,
div.setting-blocks input.mv-checkbox {
  display: inline-block;
  width: 14px;
  margin: 0 4px;
}