/* Upgrade rows share one icon/name/effect/action contract. */

@scope (body[data-ui-release="177"]) {
#panel-upgrades .item-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 54px minmax(0, 1fr) 104px;
}

#panel-upgrades :is(.upgrade-preview-button, .item-preview-button) {
  height: 52px;
  margin: 0;
  width: 52px;
}

#panel-upgrades :is(.upgrade-preview-button, .item-preview-button) > img {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  width: 100%;
}

#panel-upgrades .upgrade-level {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ui-primary) !important;
  display: inline;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: inherit !important;
  padding: 0 !important;
}

#panel-upgrades .buy-btn {
  align-content: center;
  box-sizing: border-box;
  display: grid;
  flex: none;
  justify-items: center;
  margin: 0;
  max-width: 100%;
  min-height: 48px;
  min-width: 104px;
  padding: 6px 8px;
  width: 104px;
}

#panel-upgrades .buy-btn .cost {
  font-variant-numeric: tabular-nums;
  max-width: 100%;
  overflow: hidden;
  text-overflow: clip;
  white-space: nowrap;
}

#panel-upgrades .item-row:not(.analyst-row) .item-preview-button {
  background: #edf5ff;
  border-color: #b8d8ff;
}

#panel-upgrades .system-upgrade-row {
  background: #f8fbff;
  border-color: #d7e7fb;
}

@media (max-width: 380px) {
  #panel-upgrades .item-row {
    gap: 8px;
    grid-template-columns: 52px minmax(0, 1fr) 96px;
  }

  #panel-upgrades :is(.upgrade-preview-button, .item-preview-button) {
    height: 52px;
    width: 52px;
  }

  #panel-upgrades .buy-btn {
    margin-left: 0;
    min-width: 96px;
    width: 96px;
  }
}
}