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

:host {
  --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);
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-rows: max-content max-content 1fr;
}

.detail__version, .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__last-full-update {
  padding-inline-start: var(--spacing-padding-xxl);
}

.section {
  display: contents;
}

.header {
  display: grid;
  grid-template-columns: 1fr max-content;
}

.header__detail {
  display: grid;
  row-gap: var(--spacing-gap-xl);
  grid-auto-columns: max-content;
  grid-auto-rows: max-content;
  grid-template-areas: "detail-heading-gx . . ." "detail-genexus-server detail-knowledge-base detail-version detail-last-full-update";
}

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

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

.detail__genexus-server {
  grid-area: detail-genexus-server;
}
.detail__genexus-server > a {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

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

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

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

.detail__last-full-update {
  grid-area: detail-last-full-update;
}

.filter-container {
  container-type: inline-size;
  box-sizing: border-box;
}

.filter {
  display: grid;
  margin-block-start: var(--spacing-padding-xxl);
  grid-template-areas: "filter-search filter-types filter-actions filter-kb-properties filter-buttons";
  grid-template-columns: 200px 200px 200px max-content 1fr;
}

@container (max-width: 1100px) {
  .filter-container > .filter {
    grid-template-columns: 200px 200px 200px 1fr;
    grid-template-areas: "filter-search filter-types filter-actions filter-buttons" "filter-kb-properties . . .";
    grid-auto-rows: max-content;
  }
}
@container (max-width: 900px) {
  .filter-container > .filter {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas: "filter-search filter-types filter-actions" "filter-kb-properties filter-buttons filter-buttons";
    grid-auto-rows: max-content;
  }
}
.filter__search {
  grid-area: filter-search;
}

.filter__types {
  grid-area: filter-types;
}

.filter__actions {
  grid-area: filter-actions;
}

.filter__kb-properties {
  grid-area: filter-kb-properties;
}

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

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

.loader {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  inset-block-start: 0;
}

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

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

.loader {
  --elevation-background-color: var(--color-accent-surface-elevation-1);
}

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

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

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

ch-tabular-grid-cell.tabular-grid-cell::part(actions-icon) {
  background-size: contain;
  margin-inline-end: 0;
  --icon-path: var(--icon__gemini-tools_show-more-vertical_neutral--enabled);
  cursor: pointer;
}
ch-tabular-grid-cell.tabular-grid-cell::part(actions-icon):hover {
  --icon-path: var(--icon__gemini-tools_show-more-vertical_neutral--hover);
}
ch-tabular-grid-cell.tabular-grid-cell::part(actions-icon):active {
  --icon-path: var(--icon__gemini-tools_show-more-vertical_neutral--active);
}

.tabular-grid-row-actions::part(main),
.property-grid-row-actions::part(main) {
  gap: 0 !important;
}

.tabular-grid-row-actions > button {
  justify-content: start;
}

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

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

.tabular-grid .button-secondary {
  --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 .tabular-grid-cell--for-pill {
  padding-block: 0;
  align-items: center;
  justify-content: center;
}

.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-column--settings-custom-selector,
.tabular-grid-cell--settings-custom-selector {
  padding-block: 0;
  padding-inline: 0;
}

.tabular-grid-cell::part(actions-icon) {
  padding-block: var(--spacing-padding-m);
}

ch-tabular-grid-cell.tabular-grid-cell::part(actions-icon) {
  block-size: 100%;
  display: block;
  background-size: 16px;
  padding-inline: var(--spacing-padding-xl);
}

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

.tabular-grid-row-actions::part(window) {
  background-color: var(--color-accent-surface-elevation-2) !important;
}

.tabular-grid-row .tabular-grid-cell:nth-child(3) {
  min-inline-size: 200px;
}