/*@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.
*/
*,
::after,
::before {
  box-sizing: border-box;
}

gx-ide-list-selector-item {
  display: block;
  max-width: 100%;
  display: flex;
}
gx-ide-list-selector-item:hover .label {
  background-color: var(--color-accent-item-hover);
  cursor: pointer;
}
gx-ide-list-selector-item:hover input:checked + .label {
  border-color: var(--color-accent-item-hover);
}
gx-ide-list-selector-item:active .label {
  background-color: transparent;
  color: var(--color-text-primary-pressed);
}

/*readonly*/
gx-ide-list-selector-item[readonly]:not([readonly=false]) .label {
  pointer-events: none;
  background-color: transparent;
}

/*ellipsis*/
gx-ide-list-selector-item[ellipsis]:not([ellipsis=false]) .label__description {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

gx-ide-list-selector-item input {
  width: 0;
  height: 0;
  opacity: 0;
  margin: 0;
}
gx-ide-list-selector-item input:focus + .label {
  outline: var(--focus-outline-width) solid var(--color-border-primary-focused);
  outline-offset: calc(2px * -1);
}
gx-ide-list-selector-item input:checked + .label {
  background-color: var(--color-accent-item-selected);
}
gx-ide-list-selector-item input:checked:hover + .label {
  color: var(--color-accent-primary-on-hover);
}

/*label-wrapper*/
gx-ide-list-selector-item .label {
  width: 100%;
  border-radius: 4px;
}

/*label*/
gx-ide-list-selector-item .label__wrapper {
  display: flex;
  min-height: 28px;
  /*this prevents height difference between items that have icons and items that do not*/
  align-items: center;
  gap: var(--spacing-gap-m);
  padding: 4px 8px;
  width: 100%;
}
gx-ide-list-selector-item .label__description {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-m);
}

/*no border*/
gx-ide-list-selector-item[no-border] {
  border-block-start: none;
}

/*universal slot*/
gx-ide-list-selector-item .label__universal-slot {
  display: flex;
  align-items: center;
  justify-content: center;
}