@use "design";
@use "m";

.achievementsList {
  > li {
    position: relative;

    border-bottom: 1px solid design.$card-border-color;

    a {
      @include m.shadeActive;
    }
  }
}

.achievementRow {
  display: block;

  padding-top: 33px;
  padding-bottom: 30px;

  text-align: center;

  &:not(.hidePlus):after {
    content: "+";
    position: absolute;
    left: 50%;
    margin-left: -0.625rem;
    bottom: -0.625rem;

    width: 1.25rem;
    height: 1.25rem;

    background-color: design.$card-border-color;
    border-radius: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    color: design.$text-grey;

    pointer-events: none;

    z-index: 1; // Keep above active state of rows
  }

  .oneTimeAchievementIcon {
    &:not(.achieved) {
      color: design.$text-grey;
      opacity: 0.4;
    }
    &.achieved {
      color: design.$color-success;
    }

    svg {
      margin-left: 8px;
      width: 20px;
      height: 20px;
    }
  }
}

.achievementName {
  color: design.$text-grey;
  @include design.font-smaller;
}

.achievementOverview {
  display: flex;
  align-items: center;
  justify-content: center;

  .count {
    @include design.fontH2;
  }

  .times {
    font-size: design.px-to-rem(22);
    margin: 0 8px;
    color: design.$color-primary;
  }

  .plus {
    color: design.$color-primary;
  }

  .amount {
    font-family: design.$font-brand;
    font-size: design.px-to-rem(20);

    &.isFixed {
      border-left: 1px solid design.$card-border-color;
      margin-left: 10px;
      padding-left: 10px;
    }
  }
}