/*@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%;
  overflow: auto;
  grid-template-rows: max-content 1fr max-content;
}

.section {
  display: contents;
}

.header-one-col {
  grid-template-columns: 1fr;
}
.header .field-inline {
  grid-template-columns: 4.5rem 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;
}

.main__front-end > .kb-storage-callout {
  margin-block-start: var(--spacing-gap-m);
}

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

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

.advanced-loader {
  position: relative;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.kb-storage-card {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-l);
  padding-inline: var(--spacing-padding-xl);
}

.kb-storage-card__header {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-s);
  padding-block-end: var(--spacing-padding-m);
  border-bottom: 1px solid var(--color-border-surface-on-elevation-1);
}

.kb-storage-card__heading {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xs);
  min-inline-size: 0;
}

.kb-storage-card__title {
  margin: 0;
  color: var(--color-text-neutral-default);
}

.kb-storage-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--spacing-gap-xl);
  row-gap: var(--spacing-gap-l);
}

.kb-storage-column {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-m);
  min-inline-size: 0;
}

.kb-storage-column__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-s);
  color: var(--color-text-neutral-disabled);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kb-storage-column__title-text {
  white-space: nowrap;
}

.kb-storage-column__title-rule {
  flex: 1;
  block-size: 1px;
  background-color: var(--color-border-surface-on-elevation-1);
}

.field-group--stacked {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-m);
}

.server-name-wrapper {
  display: grid;
  grid-template-columns: 1fr max-content;
  gap: var(--spacing-gap-xs);
  min-inline-size: 0;
}

.kb-storage-credentials {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-m);
}

.kb-storage-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);
}

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

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

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

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

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

.tab::part(tab-list block-start) {
  padding-inline: var(--spacing-padding-xl);
}

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

.footer.dialog-footer-with-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-gap-m);
}
.footer.dialog-footer-with-border > .buttons-spacer {
  margin-inline-start: auto;
}

.connection-status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
}
.connection-status__spinner {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-s);
  height: var(--icon-s);
  border: calc(var(--icon-s) / 7) solid var(--color-accent-primary-pressed);
  border-top: calc(var(--icon-s) / 7) solid var(--color-border-primary-on-default);
  border-radius: 50%;
  animation: spin var(--timing-regular) linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.connection-status--connecting {
  color: var(--color-accent-primary-on-default);
}
.connection-status--success {
  color: var(--color-text-success-default);
}
.connection-status--failed {
  color: var(--color-text-error-default);
}