@font-face {
  font-family: 'Vincent Praise';
  src: url('VincentPraise.woff2?v=8') format('woff2');
}
* {
  font-family: 'Vincent Praise', 'Comic Sans MS';
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
  font-smoothing: unset;
}

html {
  height: 100%
}
body {
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  background: #222;
  color: #fff;
  font-size: 1rem;
  /* the fucking gutter */
  padding-right: 16px;
  box-sizing: border-box;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background-repeat: no-repeat;
  background-position: 3px center;
}
table thead th {
  background-color: #111;
}
table thead th[data-code] {
  cursor: pointer;
  user-select: none;
}
table thead th>div {
  display: flex;
  gap: 4px;
}
table thead th .code {
  margin-left: 36px;
  width: 100%;
}
table thead th .progress {
  margin-left: auto;
  background: conic-gradient(
    #6f6 0deg,
    #6f6 var(--progress),
    #6ff var(--progress),
    #6ff var(--progress-transformed),
    #999 var(--progress-transformed),
    #999 var(--progress-fallback),
    #f66 var(--progress-fallback),
    #f66 360deg);
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
}
table thead th .progress.incomplete::after {
  content: ' ';
  background-color: #f66;
  width: 6px;
  height: 6px;
  display: block;
  border-radius: 4px;
  position: relative;
  top: 5px;
  left: 5px;
}
table thead th.collapsedCol .progress {
  display: none;
}
table thead th .badge {
  margin-left: auto;
  background: #66f;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
}
table thead th.collapsedCol .badge,
table thead th.collapsedCol button {
  display: none;
}
table tbody tr {
  border-bottom: 1px solid #444;
}
table tbody tr.group {
  background-color: #555;
}
table tbody tr:hover {
  background-color: #444;
}
table .collapsedCol {
  display: none;
  width: 36px;
  font-size: 0;
}
table td.transformed {
  font-style: italic;
  color: #6ff;
}
table td.fallback {
  font-style: italic;
  color: #999;
}
table td.fallback.notIntended {
  color: #f66;
}
table td.changed {
  color: #66f;
}
table td.fallback.notIntended.changed {
  color: #f6f;
}
table td.collapsedCol {
  pointer-events: none;
  opacity: 0;
}
table tr th[colspan] {
  background-image: url("./translate/minus.png");
  background-repeat: no-repeat;
  background-position: 2px center;
  cursor: pointer;
  user-select: none;
}
table tr th.collapseHeader {
  background-image: url("./translate/plus.png");
}
table tr.collapsedRow {
  display: none;
}
table td[data-code], table th[data-code] {
  border-left: 1px solid #444;
}
table td>div {
  display: flex;
  gap: 4px;
}
table tr[data-key]:not(.group) th {
  display: flex;
}
table tr[data-key] th>.icon {
  margin-left: auto;
  margin-right: 4px;
  width: 16px;
  height: 16px;
  background-size: 100%;
}
table tr[data-key] td[data-code] button.reset {
  display: none;
}
table tr[data-key] td[data-code].changed button.reset {
  display: block;
}
table tr[data-key] td[data-code] button.edit {
  opacity: 0;
}
table tr[data-key] td[data-code]:hover button.edit {
  opacity: 0.5;
}
table button {
  padding: 0;
  border: none;
  width: 16px;
  height: 16px;
  opacity: 0.5;
  background-repeat: no-repeat;
  background-position: center center;
  margin-left: auto;
  background-color: transparent;
  cursor: pointer;
  flex-basis: 16px;
  flex-grow: 0;
  flex-shrink: 0;
}
table button:hover {
  opacity: 1;
}
button.edit {
  background-image: url("./translate/pencil.png");
}
button.reset {
  background-image: url("./translate/reset.png");
}
button.apply {
  background-image: url("./translate/check.png");
}
button.cancel {
  background-image: url("./translate/cross.png");
}
button.copy {
  background-image: url("./translate/copy.png");
}
.value {
  width: 100%;
}
table input {
  width: 100%;
  font-size: 1rem;
  padding: 0;
  border: none;
  color: white;
  background-color: #006;
}
table input:focus {
  outline: none;
  background-color: #009;
}

dialog {
  width: 600px;
  background-color: #222;
  color: white;
  border-color: white;
  border-radius: 4px;
}

dialog h2 {
  margin-top: 0;
}

dialog #dialog-locales-list {
  max-height: 40vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

dialog label {
  height: 32px;
  width: 120px;
  background-repeat: no-repeat;
  background-position: 0 -6px;
  padding-left: 32px;
}

dialog button {
  width: 100%;
}

dialog:open::backdrop {
  background-color: rgb(128 128 128 / 40%);
}
@keyframes highlight-fade {
  0% {
    background-color: #c600;
  }
  50% {
    background-color: #c604;
  }
  100% {
    background-color: #c600;
  }
}
.highlight {
  animation: highlight-fade 1s infinite;
  animation-iteration-count: 3;
}
.hidden {
  display: none;
}