#metrics-small {
  background-color: var(--shadow);
  padding: 4px;
}

#metrics-small.invert {
  background-color: var(--surface);
  border-radius: 12px;
}

#metrics-circle {
  color: var(--surface-bright);
  border: 3px solid var(--primary);
}

#metrics-circle.bat {
  border: 3px solid var(--green);
}

#metrics-circle.alert {
  border: 3px solid var(--red-dim);
}

#metrics-icon {
  font-size: 16px;
}

#metrics-icon.alert {
  color: var(--red-dim);
}

#metrics-level {
  font-weight: bold;
  margin: 0 4px;
}

#metrics-sep {
  min-width: 4px;
}

#network-icon-label {
  color: var(--foreground);
  font-size: 20px;
  padding: 4px;
  border-radius: 11px;
  transition: all 0.1s ease;
}

#download-label {
  color: var(--green);
  font-size: 14px;
  font-weight: bold;
  padding: 4px;
  border-radius: 11px;
  transition: all 0.1s ease;
}

#download-label.urgent {
  color: var(--shadow);
}

#network-icon-label.urgent {
  color: var(--shadow);
}

#button-bar.download {
  background-color: var(--green);
}

#button-bar.upload {
  background-color: var(--yellow);
}

#download-icon-label {
  color: var(--green);
  font-size: 16px;
}

#download-icon-label.urgent {
  color: var(--shadow);
}

#upload-icon-label {
  color: var(--yellow);
  font-size: 16px;
}

#upload-label {
  color: var(--yellow);
  font-size: 14px;
  font-weight: bold;
  padding: 4px;
  border-radius: 11px;
  transition: all 0.1s ease;
}

#upload-label.urgent {
  color: var(--shadow);
}

#upload-icon-label.urgent {
  color: var(--shadow);
}