@use '../variables.scss' as *;

.factionInfo {
  display: flex;
  flex-direction: column;
}

.activityRank {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}

.factionName {
  text-transform: uppercase;
  font-size: 14px;
}

.crucibleRankIcon {
  margin: 2px 10px -2px 2px;
  position: relative;
  width: 64px;
  height: 64px;
}

.gridLayout {
  @include phone-portrait {
    .factionInfo {
      align-items: center;
      text-align: center;
    }
    &.activityRank {
      align-items: center;
      flex-direction: column;
    }
    .crucibleRankIcon {
      margin: 0 0 4px 0;
    }
  }
}

.crucibleRankProgress {
  fill: none;
}

.crucibleRankTotalProgress {
  stroke: var(--theme-accent-secondary);
  fill: none;
}

.factionLevel {
  color: var(--theme-text-secondary);
  &.max {
    color: var(--theme-accent-primary);
  }
}

.rankIcon {
  height: 10px;
  margin-right: 4px;
}

.winStreak {
  /* yellow for crucibles, green override for gambit */
  --objective-checkbox-color: #dde330;
  margin-top: 5px;
  gap: 4px;

  :global(.faction-3008065600) & {
    --objective-checkbox-color: #409a80;
  }
  & > * {
    height: 14px;
    width: 14px;
    margin: 0;
  }
}

@include phone-portrait {
  :global(.ranks-for-character) {
    .faction {
      flex-direction: column;
    }
  }
}
