:root {
  color-scheme: light dark;
}

body {
  font-family: sans-serif;
  background-color: light-dark(#f0f0f0, #222);
  color: light-dark(#000, #fff);
}

.file-display {
  margin: 3px;
  display: inline-block;
}
.file-display:hover {
  margin: 0;
  border: 3px solid blue;
}
.file-display img {
  background: url('/grid.png') top left repeat;
}
.dim {
  width: 60px;
  text-align: right;
}

.fancy-buttons {
  display: inline-flex;
  flex-direction: row;
  border-radius: 5px;
  background-image: linear-gradient(to top, #222, #333);
  color: #fff;
  font-size: 0.8em;
  overflow: hidden;
}
.fancy-buttons .button {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  padding: 0 5px;
}
.fancy-buttons .button, .fancy-buttons .button input { cursor: pointer }
.fancy-buttons .button input[type="url"] {
  border: 0;
  background-color: rgba(0,0,0,0.2);
  font-size: 0.8em;
  color: #ddd;
  width: 200px;
}
.fancy-buttons .button input[type="url"]:focus { color: #fff }
.fancy-buttons .button:hover {
  background-image: linear-gradient(to top, #555, #777);
}
.fancy-buttons .button:has(:checked) {
  background-image: linear-gradient(to top, #151, #393);
}
.fancy-buttons .button:has(:disabled) {
  background-image: linear-gradient(to top, #ddd, #ccc);
  color: #aaa;
  cursor: not-allowed;
}
.fancy-buttons .sep {
  flex-grow: 0;
  flex-shrink: 0;
  width: 1px;
  height: 100%;
  background-color: #666;
}
.fancy-buttons [type="radio"] {
  visibility: hidden;
  width: 0px;
  margin: 0;
}
[disabled] {
  opacity: 0.8;
  cursor: not-allowed;
}