:root{
  --db-freshness-current:#1a7a40;
  --db-freshness-warning:#8a5700;
  --db-freshness-danger:#b91c1c;
  --db-freshness-unknown:#4b5e77;
  --db-freshness-focus:#1f5a9d;
  --db-freshness-tooltip-bg:#f7fafd;
  --db-freshness-tooltip-border:#9aa9bc;
  --db-freshness-tooltip-text:#152238;
}

html[data-theme-mode="dawn"]{
  --db-freshness-current:#07562f;
  --db-freshness-warning:#684000;
  --db-freshness-danger:#8f1f2e;
  --db-freshness-unknown:#35495f;
  --db-freshness-focus:#173f73;
  --db-freshness-tooltip-bg:#dce4ee;
  --db-freshness-tooltip-border:#8293a8;
  --db-freshness-tooltip-text:#111d2e;
}

html[data-theme="dark"]{
  --db-freshness-current:#55bd8a;
  --db-freshness-warning:#d89a36;
  --db-freshness-danger:#e26771;
  --db-freshness-unknown:#94a3b8;
  --db-freshness-focus:#8ab4f8;
  --db-freshness-tooltip-bg:#0b1118;
  --db-freshness-tooltip-border:#344255;
  --db-freshness-tooltip-text:#edf2f7;
}

.db-freshness-heading{
  display:inline-flex;
  flex:0 1 auto;
  align-items:center;
  gap:6px;
  min-width:0;
  line-height:1;
}

.db-freshness-heading > .db-group-title,
.db-freshness-heading > h2{
  min-width:0;
}

.db-freshness-trigger{
  appearance:none;
  -webkit-appearance:none;
  position:relative;
  z-index:1;
  display:inline-grid;
  flex:0 0 12px;
  width:12px;
  height:12px;
  min-width:12px;
  min-height:12px;
  place-items:center;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:inherit;
  cursor:help;
  line-height:1;
  vertical-align:middle;
}

.db-freshness-trigger::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
}

.db-freshness-trigger:focus-visible{
  outline:2px solid var(--db-freshness-focus);
  outline-offset:3px;
}

.db-freshness-glyph{
  box-sizing:border-box;
  display:block;
  width:7px;
  height:7px;
  flex:0 0 7px;
}

[data-freshness-state="current"] > .db-freshness-glyph,
[data-freshness-state="current"] .db-freshness-glyph{
  border:0;
  border-radius:50%;
  background:var(--db-freshness-current);
  transform:none;
}

[data-freshness-state="syncing"] > .db-freshness-glyph,
[data-freshness-state="syncing"] .db-freshness-glyph{
  border:1.5px dashed var(--db-freshness-warning);
  border-radius:50%;
  background:transparent;
  transform:none;
  animation:dbFreshnessSpin 1.8s linear infinite;
}

[data-freshness-state="delayed"] > .db-freshness-glyph,
[data-freshness-state="delayed"] .db-freshness-glyph{
  border:1.5px dashed var(--db-freshness-warning);
  border-radius:50%;
  background:transparent;
  transform:none;
  animation:dbFreshnessSpin 1.8s linear infinite;
}

[data-freshness-state="stale"] > .db-freshness-glyph,
[data-freshness-state="stale"] .db-freshness-glyph{
  position:relative;
  width:8px;
  height:8px;
  border:0;
  background:transparent;
  transform:none;
  animation:none;
}

[data-freshness-state="unavailable"] > .db-freshness-glyph,
[data-freshness-state="unavailable"] .db-freshness-glyph{
  position:relative;
  width:8px;
  height:8px;
  border:0;
  background:transparent;
  transform:none;
  animation:none;
}

[data-freshness-state="unavailable"] > .db-freshness-glyph::before,
[data-freshness-state="unavailable"] > .db-freshness-glyph::after,
[data-freshness-state="unavailable"] .db-freshness-glyph::before,
[data-freshness-state="unavailable"] .db-freshness-glyph::after{
  content:"";
  position:absolute;
  top:3px;
  left:0;
  width:8px;
  height:1.5px;
  border-radius:1px;
  background:var(--db-freshness-danger);
}

[data-freshness-state="stale"] > .db-freshness-glyph::before,
[data-freshness-state="stale"] > .db-freshness-glyph::after,
[data-freshness-state="stale"] .db-freshness-glyph::before,
[data-freshness-state="stale"] .db-freshness-glyph::after{
  content:"";
  position:absolute;
  top:3px;
  left:0;
  width:8px;
  height:1.5px;
  border-radius:1px;
  background:var(--db-freshness-danger);
}

[data-freshness-state="stale"] .db-freshness-glyph::before,
[data-freshness-state="unavailable"] .db-freshness-glyph::before{
  transform:rotate(45deg);
}

[data-freshness-state="stale"] .db-freshness-glyph::after,
[data-freshness-state="unavailable"] .db-freshness-glyph::after{
  transform:rotate(-45deg);
}

[data-freshness-state="unknown"] > .db-freshness-glyph,
[data-freshness-state="unknown"] .db-freshness-glyph{
  border:1.25px solid var(--db-freshness-unknown);
  border-radius:50%;
  background:transparent;
  transform:none;
  animation:none;
}

@keyframes dbFreshnessSpin{
  to{ transform:rotate(360deg); }
}

.db-freshness-popover{
  position:fixed;
  z-index:10000;
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  max-width:calc(100vw - 20px);
  min-height:32px;
  padding:7px 10px;
  border:1px solid var(--db-freshness-tooltip-border);
  border-radius:8px;
  background:var(--db-freshness-tooltip-bg);
  color:var(--db-freshness-tooltip-text);
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  font-family:var(--sans,system-ui,sans-serif);
  text-align:left;
  pointer-events:auto;
  white-space:nowrap;
}

.db-freshness-popover[hidden]{
  display:none !important;
}

.db-freshness-popover-symbol{
  display:grid;
  width:12px;
  height:12px;
  place-items:center;
}

.db-freshness-popover-state{
  color:var(--db-freshness-tooltip-text);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.015em;
  line-height:1;
}

.db-freshness-popover[data-freshness-state="current"] .db-freshness-popover-state{
  color:var(--db-freshness-current);
}

.db-freshness-popover[data-freshness-state="syncing"] .db-freshness-popover-state,
.db-freshness-popover[data-freshness-state="delayed"] .db-freshness-popover-state{
  color:var(--db-freshness-warning);
}

.db-freshness-popover[data-freshness-state="stale"] .db-freshness-popover-state,
.db-freshness-popover[data-freshness-state="unavailable"] .db-freshness-popover-state{
  color:var(--db-freshness-danger);
}

.db-freshness-popover[data-freshness-state="unknown"] .db-freshness-popover-state{
  color:var(--db-freshness-unknown);
}

html:not([data-theme="dark"]) .db-freshness-popover{
  box-shadow:0 8px 22px rgba(36,48,66,.2);
}

@media (prefers-reduced-motion:reduce){
  [data-freshness-state="syncing"] > .db-freshness-glyph,
  [data-freshness-state="syncing"] .db-freshness-glyph,
  [data-freshness-state="delayed"] > .db-freshness-glyph,
  [data-freshness-state="delayed"] .db-freshness-glyph{
    animation:none;
  }
}