.example-editor {
  display: flex;
  flex-direction: column;

  &--mode {
    display: flex;
    justify-content: stretch;
    align-items: center;
  }

  &--mode-tab {
    display: flex;
    margin-top: 1px;
    padding: 0.25rem 1rem;
    border-top: 1px solid var(--vp-c-divider-light);
    border-right: 1px solid var(--vp-c-divider-light);

    input {
      display: none;
    }

    &_checked {
      color: var(--vp-c-brand);
    }
  }

  &--sb {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--vp-c-divider-light);
  }

  &--json {
    margin: 0;
    border: 1px solid var(--vp-c-divider-light);

    background-color: var(--vp-c-text-1);
    color: var(--vp-c-bg);
    overflow: scroll;
  }
}