.preview {
  --frame-pad: calc(var(--spacing) * 1);

  border-radius: calc(var(--radius-md) + var(--frame-pad));
  background-color: var(--color-bg-base-tertiary);
  padding: var(--frame-pad);
}

.preview-body {
  --page-pad: calc(var(--spacing) * 6);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-base);
  min-block-size: calc(var(--spacing) * 56);
  padding-inline: var(--page-pad);
  padding-block: calc(var(--spacing) * 8);
}

.scroll-region {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--color-icon-base-tertiary) transparent;

  &:focus-visible {
    outline: var(--stroke-focus) solid var(--color-border-focus);
    outline-offset: var(--stroke-focus-offset);
    border-radius: var(--radius-xs);
  }
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background-color: var(--color-bg-neutral-secondary);
  padding-inline: calc(var(--spacing) * 1.5);
  padding-block: calc(var(--spacing) * 0.5);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  line-height: calc(var(--spacing) * 5);
  font-weight: 500;
  color: var(--color-text-neutral);
  white-space: nowrap;

  &.grow {
    flex: 1;
  }
}

.matrix {
  --cell: calc(var(--spacing) * 30);
  --label-column: calc(var(--spacing) * 24);

  display: grid;
  grid-template-columns: var(--label-column) repeat(var(--columns), var(--cell));
  inline-size: max-content;

  .column {
    display: flex;
    justify-content: center;
  }

  .head {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .tick {
    inline-size: var(--stroke-border);
    block-size: calc(var(--spacing) * 3);
    background-color: transparent;

    &.horizontal {
      inline-size: calc(var(--spacing) * 5);
      block-size: var(--stroke-border);
    }
  }

  .role {
    display: flex;
    align-items: center;
  }

  .role-head {
    display: flex;
    align-items: center;
    inline-size: 100%;
  }

  .cell {
    position: relative;
    display: flex;
    block-size: var(--cell);
    background-color: var(--color-bg-base);
    border-block-start: var(--stroke-border) solid var(--color-border-base-tertiary);
    border-inline-start: var(--stroke-border) solid var(--color-border-base-tertiary);
  }

  .last-column {
    border-inline-end: var(--stroke-border) solid var(--color-border-base-tertiary);
  }

  .last-row {
    border-block-end: var(--stroke-border) solid var(--color-border-base-tertiary);
  }
}

.ladder {
  inline-size: max-content;
  min-inline-size: 100%;

  ul {
    display: flex;
    flex-direction: column;
  }

  .row {
    display: grid;
    grid-template-columns:
      calc(var(--spacing) * 20)
      calc(var(--spacing) * 12)
      var(--track, calc(var(--spacing) * 32))
      var(--second, 0px);
    align-items: center;
    gap: calc(var(--spacing) * 4);
  }

  li {
    border-block-start: var(--stroke-border) solid var(--color-border-base-tertiary);
    padding-block: calc(var(--spacing) * 4);

    &:first-child {
      border-block-start: none;
    }
  }

  .heads {
    padding-block-end: calc(var(--spacing) * 2);
  }

  .head,
  .px {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--color-text-base-secondary);
  }

  .px {
    text-align: end;
  }
}