/*@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.
*/
.hiChar {
  color: var(--color-text-primary-default);
  filter: brightness(1.3);
}

:host {
  display: grid;
  block-size: 100%;
  overflow: auto;
  grid-template-areas: "modules-container module-info" "footer footer";
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr max-content;
}

.main {
  display: contents;
}

.modules__container {
  padding-inline-end: 12px;
  grid-area: modules-container;
  grid-template-rows: max-content 1fr;
  overflow: auto;
}

.combo-box-servers {
  flex-shrink: 0;
  flex-grow: 1;
}

.modules__main {
  display: grid;
  grid-template-rows: max-content 1fr;
  overflow: auto;
}

.modules__main-header {
  display: grid;
  gap: 8px;
}

.browse-modules button {
  flex-grow: 1;
}

.module-icon {
  margin-block-start: 8px;
  transform: scale(1) translateX(4px);
}

.module-grid-item-info {
  grid-template-columns: max-content 1fr;
}

.grid-or-loader-container {
  display: grid;
  position: relative;
  overflow: hidden;
  margin-block-start: 12px;
}

.tabular-grid {
  overflow: hidden;
}

.tabular-grid-column-set {
  display: none;
}

.tabular-grid-cell-icon {
  pointer-events: none;
}

gx-ide-empty-state {
  position: absolute;
}

.module-info {
  padding-inline-start: 12px;
  grid-area: module-info;
  position: relative;
}

.modules-container,
.module-info {
  overflow: auto;
}

.module-info {
  display: grid;
  grid-template-rows: max-content 1fr;
  overflow: auto;
}

.module-info__action-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-gap-m);
}
.module-info__action-container:before {
  content: "";
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  display: block;
  background-color: var(--color-icon-neutral-disabled);
}
.module-info__action-container--installed {
  color: var(--color-text-success-default);
}
.module-info__action-container--installed:before {
  background-color: var(--color-text-success-default);
}
.module-info__action-container--uninstallable:before {
  background-color: var(--color-icon-warning-default);
}

.module-info__header {
  display: grid;
  gap: var(--spacing-gap-m);
}

.module-info__title {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--spacing-gap-xl);
}

.module-info__icon {
  transform: scale(1) translateX(4px);
}

.module-info__alert-message {
  padding: var(--spacing-padding-m) var(--spacing-padding-l);
  border-radius: 4px;
  background-color: var(--color-accent-warning-contrast);
  color: var(--color-text-neutral-default);
  border: 1px solid var(--color-border-warning-default);
  text-align: center;
  line-height: var(--line-height-spacious);
}

.module-info__properties {
  display: grid;
  overflow: auto;
  grid-auto-rows: max-content;
}

.md-property,
.md-property__list-container {
  padding-block: 8px;
  display: grid;
  gap: var(--spacing-gap-xs);
  border-block-end: 1px solid var(--elevation-border-color, var(--color-border-surface-on-surface));
}
.md-property:last-child,
.md-property__list-container:last-child {
  border-block-end: 0;
}

.md-property__list {
  margin: 0;
  list-style-type: none;
  display: inline-flex;
  padding: 0;
  gap: var(--spacing-gap-xs);
  flex-wrap: wrap;
}

.md-property__list-item {
  background-color: var(--color-accent-surface-elevation-2);
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: lowercase;
}

.md-property--inline {
  grid-template-columns: max-content 1fr;
  align-items: start;
  gap: var(--spacing-gap-m);
}

.available-versions .versions {
  flex: 1;
}
.available-versions .button-status {
  min-inline-size: 48px;
  inline-size: max-content;
  box-sizing: border-box;
}

.footer {
  grid-area: footer;
}

p.body-regular-s,
li.body-regular-s {
  line-height: var(--line-height-relaxed);
}