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

button.button-secondary {
  border-color: var(--color-border-neutral-default);
}

:host {
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-rows: max-content 1fr max-content;
}

.section {
  display: contents;
}

.header {
  display: grid;
  grid-auto-rows: max-content;
  grid-template-columns: minmax(88px, max-content) 1fr !important;
}
.header--show-access-token {
  grid-template-areas: "path-url-label path-url-wrapper" "access-token-label access-token" "style-label style" "module-label module" "checkboxes-options checkboxes-options";
}
.header--hide-access-token {
  grid-template-areas: "path-url-label path-url-wrapper" "style-label style" "module-label module" "checkboxes-options checkboxes-options";
}

.path-url-wrapper {
  grid-template-columns: 1fr max-content;
}

.path-url-label {
  grid-area: path-url-label;
}

.path-url-control {
  flex-grow: 1;
}

.select-load-button {
  min-inline-size: 80px;
}

.access-token-label {
  grid-area: access-token-label;
}

.access-token {
  grid-area: access-token;
}

.style-label {
  grid-area: style-label;
}

.style {
  grid-area: style;
}

.module-label {
  grid-area: module-label;
}

.module {
  grid-area: module;
}

.checkboxes-options {
  grid-area: checkboxes-options;
  grid-template-columns: max-content max-content;
  justify-content: space-between;
}

.main {
  display: grid;
  grid-template-columns: 250px 1fr;
  block-size: 100%;
  overflow: auto;
}
.main--loading {
  grid-template-columns: 1fr;
}

.panel-tab {
  block-size: 100%;
  display: grid;
  grid-template-columns: 1fr 300px;
}
.panel-tab .panel-item {
  overflow: auto;
}

.panel-tab:has(> :only-child) {
  grid-template-columns: 1fr;
}

.tree-view {
  padding-block: 4px;
}

.tree-view-panel-item {
  border-inline-start: var(--section-common-border);
}

.checker-board {
  --white-square-color: #fff1;
  --black-square-color: #0000;
  background: linear-gradient(45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(-45deg, var(--white-square-color) 25%, var(--black-square-color) 25%), linear-gradient(45deg, var(--black-square-color) 75%, var(--white-square-color) 75%), linear-gradient(-45deg, var(--black-square-color) 75%, var(--white-square-color) 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

/*--- Tabs ---*/
.tab {
  border-width: 0 !important;
}

.tab.fit-images .composition-tab-slot {
  font-size: 0;
}

.tab.fit-images img {
  object-fit: scale-down;
  object-position: left top;
  max-height: 100%;
}

.tab--hidden {
  display: none;
}

.button-cancel,
.button-ok {
  min-inline-size: 64px;
}

.messages-slot-container {
  block-size: 100%;
}

.composition-tab-slot {
  block-size: 100%;
  overflow: auto;
}

.empty-state {
  overflow: auto;
}

.empty-state-button {
  transform: translateY(-12px);
}

.message {
  animation: fadeIn var(--timing-fast) ease-in-out forwards;
}
.message--info {
  color: var(--color-text-neutral-strawberry);
}
.message--warning {
  color: var(--color-text-warning-default);
}
.message--error {
  color: var(--color-text-error-default);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}