/*@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.
*/
.detail__knowledge-base {
  padding-inline: var(--spacing-padding-xxl);
  border-inline-end: 1px solid var(--color-border-surface-on-elevation-1);
}

.detail__genexus-server {
  padding-inline-end: var(--spacing-padding-xxl);
  border-inline-end: 1px solid var(--color-border-surface-on-elevation-1);
}

.detail__version {
  padding-inline-start: var(--spacing-padding-xxl);
}

.filter, .filter-secondary > div {
  display: grid;
  gap: var(--spacing-gap-l);
}

:host {
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-rows: max-content max-content 1fr;
  --pill-border-radius: 12px;
  --pill-padding-inline: var(--spacing-padding-m);
  --pill-padding-block: var(--spacing-padding-xxs);
  --pill-font-size: var(--font-size-body-s);
}

.section {
  display: grid;
  display: contents;
}

.header__details {
  display: grid;
  row-gap: var(--spacing-gap-xl);
  grid-auto-columns: max-content;
  grid-auto-rows: max-content;
  margin-block-end: var(--spacing-padding-xxl);
}

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

.detail__link {
  align-items: start;
  color: var(--color-text-primary-default);
  text-decoration: underline;
}
.detail__link:hover {
  color: var(--color-text-primary-hover);
}
.detail__link:active {
  color: var(--color-text-primary-pressed);
}

.filter__combo {
  max-block-size: minmax(0, 200px);
}

.main {
  position: relative;
  display: grid;
  overflow: auto;
}

.loader {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  inset-block-start: 0;
  --elevation-background-color: var(--color-accent-surface-elevation-1);
}

.empty-state {
  block-size: 100%;
}

.tabular-grid.disabled-custom-selector .tabular-grid-cell::part(selector-label),
.tabular-grid.disabled-custom-selector .tabular-grid-column::part(bar-selector),
.tabular-grid.disabled-custom-selector .tabular-grid-cell::part(actions-icon) {
  pointer-events: none;
  opacity: 0.5;
}

.tabular-grid-cell.no-checkbox-custom-selector::part(selector-label) {
  visibility: hidden;
  pointer-events: none;
}

.tabular-grid {
  border-radius: 4px;
  overflow: hidden;
}

.tabular-grid .tabular-grid-cell--for-pill {
  padding-block: 0;
  align-items: center;
  justify-content: center;
}

.tabular-grid .button-action-custom-selector {
  --control-padding-block: var(--pill-padding-block);
  --control-padding-inline: var(--pill-padding-inline);
  font-size: inherit;
  font-weight: inherit;
  /* font-size: var(--pill-font-size); */
}

.tabular-grid.empty-result::part(main) {
  overflow: hidden;
}

.messages-list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-inline-size: 800px;
  padding: var(--spacing-padding-m) 0;
  list-style-type: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-gap-xxs);
}

.message-description {
  line-height: var(--line-height-spacious);
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
}

.message-icon {
  flex-shrink: 0;
}

.pill {
  --pill-background-color: transparent;
  --pill-color: transparent;
  --pill-border-color: transparent;
  background-color: var(--pill-background-color);
  color: var(--pill-color);
  border: 1px solid var(--pill-border-color);
  inline-size: 100%;
  padding: var(--pill-padding-block) var(--pill-padding-inline);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pill-border-radius);
  position: relative;
  font-weight: var(--font-style-semi-bold);
}
.pill--update, .pill--pending {
  --pill-background-color: var();
  --pill-color: var(--color-text-neutral-disabled);
  --pill-border-color: var();
}
.pill--to-merge-marked {
  --pill-background-color: var();
  --pill-color: var(--color-border-primary-default);
  --pill-border-color: var();
}
.pill--ignored {
  --pill-background-color: var(--color-accent-surface-elevation-2);
  --pill-color: var(--color-text-neutral-on-disabled);
  --pill-border-color: var(--color-border-neutral-default);
}
.pill--pending {
  --pill-background-color: var(--color-accent-neutral-contrast);
  --pill-color: var(--color-border-primary-default);
  --pill-border-color: var(--color-accent-primary-pressed);
}
.pill--warning {
  --pill-background-color: var(--color-accent-warning-contrast);
  --pill-color: var(--color-border-warning-default);
  --pill-border-color: var(--color-border-warning-default);
}
.pill--error {
  --pill-background-color: var(--color-accent-error-contrast);
  --pill-color: var(--color-border-error-default);
  --pill-border-color: var(--color-border-error-light);
}
.pill--committed {
  --pill-background-color: var(--color-accent-success-contrast);
  --pill-color: var(--color-border-success-default);
  --pill-border-color: var(--color-accent-success-default);
}
.pill--transitioning {
  --pill-color: transparent;
}

.spinner-caption {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
  --status-circle-color: transparent;
  --status-circle-size: $size;
  --status-circle-inset-inline-start: 16px;
  --pill-color: var(--color-border-primary-default);
}
.spinner-caption::before {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  border: calc(16px / 7) solid var(--color-accent-primary-pressed);
  border-top: calc(16px / 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);
  }
}

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

.custom-icon-text-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
}

.warning-error-description {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
  padding: var(--spacing-padding-m);
  max-inline-size: 800px;
  line-height: var(--line-height-spacious);
}

.warning-error-icon {
  flex-shrink: 0;
}

/*@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);
}

.header__details {
  grid-template-areas: "detail-heading-gx . . ." "detail-genexus-server detail-knowledge-base detail-version detail-last-full-update";
}

.detail__heading-genexus-server {
  grid-area: detail-heading-gx;
}

.detail__genexus-server {
  grid-area: detail-genexus-server;
}

.detail__knowledge-base {
  grid-area: detail-knowledge-base;
}

.detail__version {
  grid-area: detail-version;
}

.filter-container {
  container-type: inline-size;
  box-sizing: border-box;
  display: grid;
  column-gap: var(--spacing-gap-l);
  grid-template-areas: "filter-primary filter-toggle-button filter-action-buttons" "filter-secondary . ." "comments comments comments";
  grid-template-columns: minmax(0, max-content) max-content 1fr;
}

.filter-primary {
  grid-area: filter-primary;
  grid-template-columns: minmax(0, 200px) minmax(0, 200px) minmax(0, 200px);
}

.filter-container > :nth-child(2) {
  grid-area: filter-toggle-button;
}

.filter-container > :nth-child(3) {
  grid-area: filter-action-buttons;
  justify-content: end;
}

.filter__toggle-secondary-filter-btn {
  grid-area: filter-toggle-button;
}

.filter__buttons {
  grid-area: filter-buttons;
  margin-inline-start: auto;
}

.filter-secondary {
  display: grid;
  grid-template-rows: 0fr;
  grid-area: filter-secondary;
  transition: grid-template-rows var(--timing-fast);
}

.filter-secondary--visible {
  grid-template-rows: 1fr;
}

.filter-secondary > div {
  display: grid;
  overflow: hidden;
  font-size: 0;
  grid-template-columns: repeat(3, minmax(0, 200px));
}

.filter-secondary > div > .combo-box,
.comments {
  margin-block-start: var(--spacing-gap-l);
}

.comments {
  grid-area: comments;
}

.input-comments-container {
  position: relative;
}

.input-comments {
  --control-border-color: transparent;
  padding-block: 0 !important;
  padding-inline: 0 !important;
  --line-height-tight: 1.4;
  block-size: 100%;
  background-color: var(--color-accent-surface-surface);
  transition: var(--timing-super-fast) block-size, var(--timing-super-fast) background-color, var(--timing-super-fast) padding-block, var(--timing-super-fast) padding-inline;
}

.input-comments:focus {
  position: absolute;
  block-size: minmax(0, 200px);
  inline-size: 100%;
  z-index: 99;
  background-color: var(--color-accent-surface-elevation-1);
  padding-block: var(--control-padding-block) !important;
  padding-inline: var(--control-padding-inline) !important;
}