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

.tab-stops-demo__settings {
  background-color: color-mix(in srgb, var(--ink), transparent 95%);
  border-bottom: 1px solid
    color-mix(in srgb, var(--ink), transparent 95%);
  margin: -1rem -1rem 1rem -1rem;
  padding: 0.5rem 1rem;
  input[type="range"] {
    width: 100%;
    accent-color: var(--ink);
    outline-offset: 0.25rem;
    border-radius: 0.25rem;
    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,
      #f5a10e,
      transparent 90%
    );
    &::before {
      content: "   ⇥   ";
      position: absolute;
      left: 0;
      right: 0;
      overflow: hidden;
      text-align: center;
      pointer-events: none;
      color: light-dark(#b45309, #f5a10e);
    }
  }
}