:root {
  --dt-logo-surface-bg: color-mix(in srgb, var(--dt-bg, #0b0f16) 30%, black 70%);
  --dt-logo-surface-border: var(--dt-control-border, var(--dt-border, rgba(255, 255, 255, 0.18)));
  --dt-logo-surface-radius: calc(var(--dt-control-radius, 9px) - 2px);
  --dt-logo-surface-pad: 2px;
}

.dt-logo-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--dt-logo-surface-pad);
  border-radius: var(--dt-logo-surface-radius);
  border: 1px solid var(--dt-logo-surface-border);
  background: var(--dt-logo-surface-bg);
  transition: border-color 150ms ease, background 150ms ease;
}

.dt-logo {
  width: 20px;
  height: 20px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  display: block;
}

.dt-return-link .dt-logo-symbol {
  --dt-logo-surface-bg: color-mix(in srgb, var(--bm-bg, var(--dt-bg, #0b0f16)) 30%, black 70%);
  --dt-logo-surface-border: var(--dt-control-border, var(--bm-border, rgba(10, 20, 40, 0.14)));
}

.dt-return-link .dt-logo {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}
