/* Native button skins for the Armory interface. */
.scav-tab,
.scav-grid {
  appearance: none;
  display: inline-grid;
  place-items: center;
  border: 0;
  padding: 0;
  color: #e9dfca;
  background: transparent var(--button-image) center / 100% 100% no-repeat;
  image-rendering: pixelated;
  cursor: pointer;
}

.scav-tab {
  --button-image: url("assets/buttons/tab-normal.png");
  --button-hover: url("assets/buttons/tab-hover.png");
  --button-pressed: url("assets/buttons/tab-pressed.png");
  inline-size: 142px;
  block-size: 47px;
  font: 600 20px Type_Font_1, Impact, sans-serif;
}

.scav-grid {
  --button-image: url("assets/buttons/grid-normal.png");
  --button-hover: url("assets/buttons/grid-hover.png");
  --button-pressed: url("assets/buttons/grid-pressed.png");
  inline-size: 46px;
  block-size: 26px;
}

@media (hover: hover) {
  :is(.scav-tab, .scav-grid):hover:not(:disabled) {
    background-image: var(--button-hover);
  }
}

:is(.scav-tab, .scav-grid):is(:active, [aria-pressed="true"]):not(:disabled) {
  background-image: var(--button-pressed);
}

:is(.scav-tab, .scav-grid):focus-visible {
  outline: 2px solid #d4be78;
  outline-offset: 3px;
}

:is(.scav-tab, .scav-grid):disabled {
  opacity: .55;
  cursor: default;
}