/* - - - - - - - - - - - - - - - - -
New classes for Chameleon + Mercury
- - - - - - - - - - - - - - - - - */
:host {
  display: grid;
  block-size: 100%;
}

.opacity-0 {
  opacity: 0;
}

.gxi-hidden {
  display: none !important;
}

.align-center {
  display: flex;
  align-items: center;
}

.align-end {
  display: flex;
  align-items: end;
}

.overflow-auto {
  overflow: auto;
}

/*All components Host should have this class set. !important is set on every rule, since this styles could be overridden by the host user, since they are applied on the host component*/
:host(.gx-ide-component) {
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Main wrapper (should be the first element inside the host. Everything should be inside .gx-ide-main-wrapper) */
.gx-ide-main-wrapper {
  color: var(--gx-ide-component-text-color);
  font-weight: var(--font-style-regular);
  font-size: var(--font-size-body-m);
  font-family: var(--font-family-body);
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  box-sizing: border-box;
}

/* - - - - - - - - - - - - - - - - - -
New : For Mercury
- - - - - - - - - - - - - - - - - - */
.buttons-container {
  display: flex;
  gap: var(--spacing-gap-m);
}

/* - - - - - - - - - - - - - - - - - -
Pill
- - - - - - - - - - - - - - - - - - */
.giu-static-pill-icon-and-text, .giu-static-pill {
  background-color: var(--elevation-background-color, var(--color-accent-surface-elevation-1));
  padding-inline: var(--spacing-padding-m);
  color: var(--color-text-neutral-default);
  font-size: var(--font-size-body-s);
  line-height: var(--line-height-relaxed);
  font-weight: var(--font-style-regular);
  border-radius: 4px;
  min-block-size: 25px;
  display: inline-grid;
  align-items: center;
  pointer-events: none;
  inline-size: max-content;
}

.giu-static-pill-icon-and-text {
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  gap: var(--spacing-gap-m);
}

/* - - - - - - - - - - - - - - - - - -
Tab
- - - - - - - - - - - - - - - - - - */
.tab-full-width-buttons::part(tab-list block-start),
.tab-full-width-buttons::part(tab-list block-end) {
  grid-auto-columns: 1fr;
}

.tab-full-width-buttons::part(tab block-start) {
  justify-content: center;
}

/* - - - - - - - - - - - - - - - - - -
Tree
- - - - - - - - - - - - - - - - - - */
/* Now the tree-view warning icon, looks gray on disabled items. This is a workaround to change the color to the enabled color, until this is resolved on Mercury. The solution might be to add a colorType for warning, error or success, that is static, meanning, it looks alwaws as "enabled", even if it is disabled. */
.tree-view::part(item__header) {
  --icon__system_warning_warning--disabled: var(
    --icon__system_warning_warning--enabled
  );
}

/* - - - - - - - - - - - - - - - - - -
Tabular Grid
- - - - - - - - - - - - - - - - - - */
.tabular-grid {
  --focus-outline-width: 1px;
}

ch-popover {
  background-color: var(--color-accent-surface-elevation-1);
  border: 1px solid var(--color-border-surface-on-surface);
  border-radius: var(--border-radius-s);
  box-shadow: var(--shadow-elevation-2);
}
ch-popover > div {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--spacing-padding-m);
  max-block-size: 300px;
  overflow-y: auto;
}

.checkbox-item {
  display: flex;
  inline-size: 100%;
  padding-block: var(--spacing-padding-xs);
  padding-inline: var(--spacing-padding-m);
  cursor: pointer;
  border-radius: var(--border-radius-s);
}
.checkbox-item:hover {
  background-color: var(--color-accent-item-selected);
}
.checkbox-item::part(checkbox) {
  inline-size: 100%;
}
.checkbox-item::part(label) {
  inline-size: 100%;
  cursor: pointer;
  flex: 1;
}

.multi-select__button {
  display: flex;
  align-items: center;
  gap: var(--spacing-gap-s);
  overflow: hidden;
}
.multi-select__chevron {
  flex-shrink: 0;
  margin-inline-start: auto;
}
.multi-select__placeholder {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.multi-select__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-gap-xs);
  flex: 1;
  align-items: center;
}
.multi-select__item {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-gap-xs);
  padding: 2px var(--spacing-padding-xs);
  background-color: var(--color-accent-item-pressed);
  border-radius: var(--border-radius-s);
}
.multi-select__item button {
  padding: 0;
}
.multi-select__caption {
  color: var(--color-text-neutral-on-disabled);
}
.multi-select__close {
  padding: 0;
  margin: 0;
}

ch-checkbox.checkbox::part(label) {
  font-weight: var(--font-style-regular);
  color: var(--color-text-neutral-default);
}