@use "@fox/styles/abstracts" as fox;

.name {
  display: flex;
  align-items: center;
  gap: fox.gap(2);
}

.toggle {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  inline-size: fox.icon(4);
  block-size: fox.icon(4);
  border: 0;
  background: none;
  color: fox.color(font-neutral-subtle);
  cursor: pointer;
}

.togglePlaceholder {
  flex-shrink: 0;
  inline-size: fox.icon(4);
}

.state {
  display: inline-flex;
  inline-size: fox.icon(5);
  block-size: fox.icon(5);
}

.active {
  color: fox.color(font-system-success);
}

.inactive {
  color: fox.color(font-system-danger);
}