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

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

.section {
  display: contents;
}

.header-one-col {
  grid-template-columns: 1fr;
}

.location-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  min-block-size: var(--control-block-size);
}

.location-custom-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  flex-grow: 1;
  min-inline-size: 0;
}

.location-field {
  flex-grow: 1;
  min-inline-size: 0;
}
.location-field > .input {
  inline-size: 100%;
}

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

.basic__header {
  grid-area: basic-top;
  grid-template-columns: 1fr 1fr;
}

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

.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;
}

.section__back-end {
  grid-area: back-end;
  grid-auto-rows: max-content;
}

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

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

.tab-advanced-title {
  grid-area: tab-advanced-title;
}

.layout-tab-advanced-left-col {
  grid-area: layout-tab-advanced-left-col;
}

.layout-tab-advanced-right-col {
  grid-area: layout-tab-advanced-right-col;
}

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

.tab-advanced__field-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
}

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

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

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