@use 'sass:color';
@use '../variables.scss' as *;

.statName {
  grid-column: 1;
  text-align: right;
  margin-right: 8px;
  max-width: 130px;
  text-overflow: ellipsis;
  overflow-x: clip;

  @include phone-portrait {
    max-width: 40vw;
  }
}

.tunableSymbol {
  position: relative;
}

// The numeric value of the stat
.value {
  grid-column: 2;
  text-align: right !important;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  > svg {
    vertical-align: middle;
    margin-left: 4px;
  }
}

.icon {
  margin-left: 4px;
  img {
    height: 12px;
    width: 12px;
    vertical-align: bottom;
    filter: drop-shadow(0 0 0 white);
  }
}

// Stat bars
.statBar {
  margin-left: 8px;
  grid-column: -2 / -1;
}
.barContainer {
  background-color: #333;
  display: flex;
  width: 100%;
  height: 100%;

  :global(.armory) & {
    background: rgb(0, 0, 0, 0.5);
    backdrop-filter: blur(6px);
  }
}

.statBarSegment {
  order: 1;
  display: block;
  height: 100%;
  float: left;
  line-height: 20px;
  background-color: #555;
  background-color: white;
  color: black;
  transition: width 150ms ease-in-out;

  &.negative {
    background-color: #7a2727;
    order: 5; // Push negative segments to the right side of the bar
  }

  // An assumption: never more than 4 part effects in a single stat?
  // 3 have been observed on weapons with a barrel + mag + grip.
  &.parts {
    order: 2;
    opacity: 0.88;
    & + &.parts {
      opacity: 0.76;
      & + &.parts {
        opacity: 0.64;
        & + &.parts {
          opacity: 0.52;
        }
      }
    }
  }

  &.mod {
    order: 3;
    background-color: $stat-modded;
    & + &.mod {
      opacity: 0.8;
      & + &.mod {
        opacity: 0.6;
      }
    }
  }

  &.trait {
    order: 3;
    background-color: #4887ba;
    & + &.trait {
      opacity: 0.8;
      & + &.trait {
        opacity: 0.6;
      }
    }
  }

  // Colors for the stat bars
  &.masterwork {
    order: 4;
    background-color: $stat-masterworked;
  }
}

.statBarTooltip {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 4px;

  & > :nth-child(2n-1) {
    text-align: right;
  }

  .mod {
    color: $stat-modded;
  }
  .trait {
    color: #4887ba;
  }
  .masterwork {
    color: $stat-masterworked;
  }
  .negative {
    color: $red;
    order: 1; // Push negative rows to the end of the addition list
  }
  .base {
    opacity: 1;
  }
  .parts {
    opacity: 0.8;
  }

  .tooltipNetStat {
    order: 2; // Keep this after the negative rows
    display: grid;
    grid-template-columns: subgrid;
    grid-column: span 2;
    span:nth-child(2) {
      text-align: left;
    }
  }
  .tooltipTotalRow {
    // Addition-bar styling
    margin-top: 2px;
    padding-top: 1px;
    border-top: 1px solid #fff;
    font-weight: bold;
  }
}

.qualitySummary {
  grid-column: 2 / -1;
  a {
    margin-left: 4px;
  }
}

.quality {
  display: inline;
  margin-left: 4px;
}

.masterworked {
  color: $stat-masterworked;
}

.negativeModded {
  color: $red;
}

.archetypeStat {
  font-weight: bold;
}

.totalRow {
  padding-top: 4px;
}
.totalRow.value {
  border-top: 1px solid white;
  padding-top: 3px;
}
// Total stat breakdown
.totalStatDetailed {
  margin-left: 8px;
  grid-column: -2 / -1;
}

.totalStatModded {
  color: $stat-modded;
}

.totalStatNegativeModded {
  color: $red;
}

.totalStatMasterwork {
  color: $stat-masterworked;
}

.customTotal {
  color: #bbb;
}
.nonDimmedStatIcons {
  color: #bbb;
  :global(.stat-icon) {
    filter: none;
  }
}

.smallStatToggle {
  grid-column: -3 / -1;
  margin-left: 4px;
  img {
    height: 12px !important;
    width: 12px !important;
    vertical-align: bottom;
  }
}
