:root {
  --spacing-general-0: 12px 18px;
  --spacing-general-1: 20px;
  --color-border-0: #eaecf0;
  --border-radius-0: 4px;
  --font-size-0: 1rem;
  --font-size-2: 36px;

  --color-up: #17b26a;
  --color-down: #f04438;
  --color-pause: #fdb022;
}

.server-status-tile {
  min-width: 100px;
  width: calc(100% - 310px);
  padding: var(--spacing-general-0);
  border: 1px solid var(--color-border-0);
  border-radius: var(--border-radius-0);
  background-color: var(--env-var-color-8);
}

.server-status-tile-title {
  font-size: var(--font-size-0);
  font-weight: 500;
  margin-bottom: calc(var(--spacing-general-1) / 2);
  color: var(--env-var-color-5);
  opacity: 0.6;
}

.server-status-tile-value {
  font-size: var(--font-size-2);
  font-weight: bolder;
}

.up {
  color: var(--color-up);
}

.down {
  color: var(--color-down);
}

.pause {
  color: var(--color-pause);
}