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

.seasonalRewardWrapper {
  composes: pursuit from './PursuitItem.m.scss';

  width: var(--item-size);
  height: var(--item-size) !important;
  img {
    border: $item-border-width solid #666;
    box-sizing: border-box;
  }
  &.free {
    background: #2b2f33;
  }
  &.premium {
    background: #016062;
  }
}

.hasPremiumRewards {
  :global(.milestone-icon) {
    max-width: calc(var(--item-size) * 2.1);
    width: min-content;
  }
}

.progress {
  width: 90%;
  text-align: center;
  > span {
    white-space: nowrap;
  }
}

.seasonEnd {
  font-style: italic;
}

.seasonalRewards {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

.progressBar {
  position: relative;
  bottom: 0;
  left: 0;
  margin-top: 5px;
}

.seasonName {
  font-size: 14;
  color: var(--theme-text-secondary);
}

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

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

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

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

.seasonRankProgress {
  fill: none;
}

.seasonLevel {
  color: var(--theme-text-secondary);
}

.seassonTitle {
  font-size: 14px;
  color: var(--theme-text);
  text-transform: uppercase;
}

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