.tab-stops-demo {
  --tab-size: 8;
  background-color: var(--color-light);
  color: var(--color-dark);
  border-radius: var(--border-radius);
  resize: horizontal;
  min-width: 20ch;
  max-width: 100%;
  overflow: hidden;
  padding: 1rem;
}

.tab-stops-demo__settings {
  background-color: color-mix(in srgb, var(--color-dark), transparent 95%);
  border-bottom: 1px solid
    color-mix(in srgb, var(--color-dark), transparent 95%);
  margin: -1rem -1rem 1rem -1rem;
  padding: 0.5rem 1rem;
  input[type="range"] {
    width: 100%;
    accent-color: var(--color-dark);
    outline-offset: 0.25rem;
    border-radius: var(--border-radius);
    cursor: pointer;
  }
}

.tab-stops-demo__output {
  container-type: inline-size;
  overflow: hidden;
}

tab-stop {
  display: inline;
  white-space: pre;
  tab-size: var(--tab-size, 8);
  position: relative;

  .show-invisibles & {
    border-radius: 10rem;
    overflow: hidden;
    background-color: color-mix(
      in srgb,
      var(--color-highlight),
      transparent 90%
    );
    &::before {
      content: "   ⇥   ";
      position: absolute;
      left: 0;
      right: 0;
      overflow: hidden;
      text-align: center;
      pointer-events: none;
      color: var(--color-highlight);
    }
  }
}