.theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  height: 1.5rem;
  gap: 0.1875rem;
  color: var(--text-primary);
  transition: opacity 0.2s ease;
  padding: 0 0 0 0.5rem;
  position: relative;
}

.theme-toggle .theme-icon {
  width: 0.4375rem;
  height: 0.4375rem;
  transition: all 0.2s ease;
}

.theme-toggle .hollow-circle {
  border: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.125px var(--text-primary);
}

.theme-toggle .solid-circle {
  background-color: var(--text-primary);
  border-radius: 50%;
}