@use '../tokens' as t;

.toggle {
  color: t.role('fg-muted');
}

.select {
  min-inline-size: 9rem;
}

// A pure-CSS sun/moon: a filled disc that a box-shadow crops into a crescent.
.glyph {
  display: block;
  inline-size: 0.9rem;
  block-size: 0.9rem;
  border-radius: t.radius(full);
  background: currentcolor;

  &[data-theme-glyph='dark'] {
    background: transparent;
    box-shadow: inset t.rem(-4.5px) t.rem(-3px) 0 0 currentcolor;
  }
}