/* SMCE icon primitives */
.smce-icon {
  inline-size: 1.125rem;
  block-size: 1.125rem;
  flex: 0 0 auto;
  display: inline-block;
  color: currentColor;
}

.smce-icon--functional {
  fill: none;
  stroke: currentColor;
}

.smce-icon--domain {
  inline-size: 1rem;
  block-size: 1rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.smce-icon--domain-lg {
  inline-size: 1.5rem;
  block-size: 1.5rem;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.smce-tool-button {
  inline-size: 2rem;
  block-size: 2rem;
  display: inline-grid;
  place-items: center;
  color: var(--smce-text-secondary, #a7b5cc);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--smce-radius-sm, 4px);
}

.smce-tool-button:hover {
  color: var(--smce-text-primary, #edf4ff);
  background: rgb(255 255 255 / 0.05);
}

.smce-tool-button[aria-pressed="true"] {
  color: var(--smce-text-primary, #edf4ff);
  background: rgb(60 169 255 / 0.20);
  border-color: rgb(98 190 255 / 0.72);
}

.smce-tool-button:focus-visible {
  outline: 2px solid var(--smce-focus, #73c9ff);
  outline-offset: 2px;
}