button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  display: grid;
  block-size: 100%;
  grid-template-rows: max-content 1fr max-content;
}

.section {
  display: contents;
}

.basic,
.advanced {
  padding-block-start: 16px;
  block-size: 100%;
  overflow: auto;
}

.advanced {
  padding-block-end: 12px;
}

.basic {
  display: grid;
  grid-template: "runtime-environment runtime-environment" max-content "back-end front-end" 1fr;
  grid-template-columns: 1fr 1fr;
}

.basic__runtime-environment {
  grid-area: runtime-environment;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-gap-m);
}

.basic__runtime-environment.one-runtime-only {
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.dialog-header__back-end,
.dialog-header__front-end {
  padding-block-start: 16px;
}

.basic__back-end {
  grid-area: back-end;
}

.basic__front-end {
  grid-area: front-end;
}

.basic__back-end,
.basic__front-end {
  display: grid;
  grid-template-rows: max-content 1fr;
  grid-auto-rows: max-content;
  overflow: auto;
}

.main__back-end {
  border-inline-end: var(--section-common-border);
}

.main__back-end,
.main__front-end {
  grid-auto-rows: max-content;
  padding-block: 12px;
  overflow: auto;
}

.text-align-center {
  text-align: center;
}

.tab::part(page) {
  scrollbar-width: thin;
}

.checkbox {
  inline-size: max-content;
}