/*@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.
*/
button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  --common-spacing: var(--spacing-padding-xxl);
  --spacing-body-block-start: var(--common-spacing);
  --spacing-body-block-end: var(--common-spacing);
  --spacing-body-inline-start: var(--common-spacing);
  --spacing-body-inline-end: 0;
  --spacing-body-inline-start: 0;
  display: grid;
  block-size: 100%;
  overflow: auto;
}

:host(.spacing-body) .section-secondary,
:host(.spacing-body) .section-create-new-kb__header,
:host(.spacing-body) .section-create-new-kb__actions,
:host(.spacing-body-inline) .section-secondary,
:host(.spacing-body-inline) .section-create-new-kb__header,
:host(.spacing-body-inline) .section-create-new-kb__actions {
  padding-inline-start: var(--common-spacing);
  padding-inline-end: var(--common-spacing);
}

:host(.spacing-body-inline-start) .section-secondary,
:host(.spacing-body-inline-start) .section-create-new-kb__actions {
  padding-inline-start: var(--common-spacing);
}

:host(.spacing-body-inline-end) .section-secondary,
:host(.spacing-body-inline-end) .section-create-new-kb__actions {
  padding-inline-end: var(--common-spacing);
}

.main {
  animation: fadeIn var(--timing-fast) forwards;
  display: grid;
  block-size: 100%;
  overflow: auto;
  opacity: 0;
  grid-template-rows: max-content 1fr;
  gap: var(--spacing-gap-xxl);
}

@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(calc(-1 * 32px));
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.section-create-new-kb__actions,
.section-secondary__actions {
  display: grid;
  grid-auto-flow: column;
  gap: var(--spacing-gap-xl);
  overflow-x: auto;
  padding-block-end: var(--spacing-padding-m);
}

.card-filled,
.card-outlined {
  display: grid;
  gap: var(--spacing-gap-xl);
  align-content: space-between;
  border-radius: 8px;
}

.card-filled {
  background-color: var(--color-accent-surface-elevation-1);
  padding: var(--spacing-padding-xl);
}

.card-outlined {
  border: 1px solid var(--color-border-surface-on-surface);
  grid-template-columns: max-content 1fr;
  align-items: center;
  padding: var(--spacing-padding-xl) var(--spacing-padding-xl) var(--spacing-padding-m) var(--spacing-padding-xl);
}

.icon-capsule {
  pointer-events: none;
  display: inline-flex;
  block-size: 40px;
  inline-size: 40px;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 1px dashed var(--color-border-surface-on-elevation-2);
}

.card__header {
  display: grid;
  gap: var(--spacing-gap-l);
  justify-items: self-start;
}

.card__header-description {
  display: grid;
  gap: var(--spacing-gap-m);
}

.section-create-new-kb {
  display: grid;
  grid-auto-rows: max-content;
  gap: var(--spacing-gap-xxl);
}
.section-create-new-kb__header {
  display: grid;
  gap: var(--spacing-gap-m);
}
.section-create-new-kb__title {
  color: var(--color-text-neutral-default);
}
.section-create-new-kb__actions {
  display: grid;
  gap: var(--spacing-gap-xl);
  overflow-x: auto;
  grid-auto-flow: column;
  grid-auto-columns: 330px;
}

.samples-buttons-container {
  flex-wrap: wrap;
}

.section-secondary {
  display: grid;
  block-size: 100%;
  position: relative;
  overflow: auto;
}
.section-secondary__title {
  display: grid;
  grid-template-columns: 1fr max-content 1fr;
  gap: var(--spacing-gap-xl);
  align-items: center;
}
.section-secondary__title::before, .section-secondary__title::after {
  content: "";
  block-size: 1px;
  background-color: var(--color-border-surface-on-elevation-1);
}
.section-secondary__actions {
  display: grid;
}
.section-secondary__actions--two-cards {
  grid-template-columns: repeat(2, minmax(430px, 1fr));
}
.section-secondary__actions--multiple-cards {
  grid-auto-columns: 670px;
}

.section-no-kbs {
  display: grid;
  block-size: 100%;
  position: relative;
  overflow: auto;
  grid-template-rows: max-content max-content;
  gap: var(--spacing-gap-xl);
}

.section-kbs {
  background-color: var(--color-accent-surface-elevation-1);
  border-radius: 4px;
  padding: var(--spacing-padding-l);
  display: grid;
  container-type: inline-size;
  grid-template-rows: auto 1fr;
  overflow: hidden;
}
.section-kbs__header {
  display: grid;
  grid-template-columns: max-content 230px;
  align-items: center;
  gap: var(--spacing-gap-xxxl);
  border-block-end: 1px solid var(--color-border-surface-on-elevation-1);
  padding-block-end: var(--spacing-padding-l);
}
.section-kbs__header--no-border {
  border-block-end-color: transparent !important;
}
.section-kbs__title {
  align-items: center;
  display: flex;
  min-block-size: calc(32px - 1px);
}
.section-kbs__filter--hidden {
  opacity: 0;
}
.section-kbs__list {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--spacing-gap-m);
  column-gap: var(--spacing-gap-xl);
  overflow: auto;
  position: relative;
  padding-block-start: var(--spacing-padding-l);
}
.section-kbs__list--empty {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  overflow: hidden;
}
@container (max-width: 768px) {
  .section-kbs__list {
    grid-template-columns: 1fr;
  }
}

.kb__item {
  background-color: var(--color-accent-surface-elevation-2);
  padding: var(--spacing-padding-l);
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 48px;
}
.kb__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  gap: var(--spacing-gap-l);
  overflow: hidden;
}
.kb__info {
  display: grid;
  gap: var(--spacing-gap-xs);
  overflow: hidden;
}
.kb__name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
}
.kb__name:hover {
  color: var(--color-text-neutral-default);
}
.kb__modified {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: end;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-neutral-disabled);
}
.kb__path {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--color-text-neutral-disabled);
}

.hiChar {
  color: var(--color-text-primary-default);
  filter: brightness(1.3);
}

.loader {
  border: 1px solid var(--color-border-surface-on-surface);
}

.heading-2,
.heading-3 {
  margin: 0;
  color: #ffffff !important;
}

.card-filled .heading-3 {
  color: var(--color-text-neutral-strawberry) !important;
}

.card__header-title {
  color: var(--color-text-neutral-default);
}

.button-tertiary-no-padding-inline-start.button-tertiary {
  padding-inline-start: 0;
}