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

/*@container queries*/
/* hiChar styles
Found on /common/helpers.tsx hiChar function is used to add a span/class to every character that matches a search value. It is used to help the user see why the filter results are filtered. The span/class on the characters are useless without proper styling.
*/
: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;
}

.callout {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-gap-xs);
  padding: var(--spacing-padding-m);
  border: 1px solid var(--color-border-surface-on-elevation-2);
  border-radius: var(--border-radius-s);
  background-color: var(--color-accent-surface-elevation-2);
  margin-block-start: var(--spacing-gap-m);
}

.callout-inner {
  display: flex;
  flex-direction: column;
}

.callout__title {
  display: flex;
  gap: var(--spacing-gap-xs);
}

.callout__description {
  color: var(--color-text-neutral-disabled);
}

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

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

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