@mixin rankNumber($color, $textColor: var(--color-54), $showDiffStyling: true) {
  &:after {
    color: $textColor;
    // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='96' viewBox='0 0 132 96' fill='none'%3E%3Cg filter='url(%23filter0_d_1086_6140)'%3E%3Cpath d='M16 24C16 19.5817 19.5817 16 24 16H95.0783C97.9118 16 99.847 18.8649 98.7891 21.4934L83.6994 58.9869C82.4804 62.0158 79.543 64 76.2779 64H18C16.8954 64 16 63.1046 16 62V24Z' fill='%23FFD90F'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_1086_6140' x='0' y='0' width='131.082' height='96' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dx='8' dy='8'/%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_1086_6140'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_1086_6140' result='shape'/%3E%3C/filter%3E%3C/defs%3E%3C/svg%3E");
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='96' viewBox='0 0 132 96' fill='none'%3E%3Cg filter='url(%23filter0_d_1086_6140)'%3E%3Cpath d='M16 24C16 19.5817 19.5817 16 24 16H95.0783C97.9118 16 99.847 18.8649 98.7891 21.4934L83.6994 58.9869C82.4804 62.0158 79.543 64 76.2779 64H18C16.8954 64 16 63.1046 16 62V24Z' fill='%23FFD90F'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    // background: #ffd90f;
    box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.08);
    border-radius: 0.4rem;
    position: absolute;
    @include flex-align(center, center);
    font-weight: 700;
    font-size: 20px;
    line-height: 20px;
    color: #060606;
    z-index: 1;
    top: -0.8rem;
    left: -0.7rem;
    padding-right: 0.5rem;
    height: 4rem;
    width: 5.9rem;

    @if $showDiffStyling {
      @include min(tablet) {
        height: 4rem;
        width: 5.9rem;
        top: -0.8rem;
        left: -0.7rem;
      }
    }
  }
}

.list {
  @include flex-direction(column);
  gap: 2.1rem;

  @include min(tablet) {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.2rem;
    grid-column-gap: 2rem;

    > li {
      grid-column: 1/3;
    }

    // >li:first-child,
    // >li:nth-child(2) {
    //   grid-row: 1;
    // }

    // >li:first-child {
    //   grid-column: 2;
    //   margin-bottom: 5rem;
    // }

    // >li:nth-child(2) {
    //   grid-column: 1;
    //   margin-top: 5rem;
    // }

    // >li:nth-child(3) {
    //   margin-top: 5rem;
    // }
  }

  @include min(laptop) {
    grid-template-columns: 1fr 1fr 1fr;

    > li {
      grid-column: 1/4;
    }

    > li:first-child,
    > li:nth-child(2) {
      grid-row: 1;
    }

    > li:first-child {
      grid-column: 2;
      margin-bottom: 5rem;
    }

    > li:nth-child(2) {
      margin-top: 5rem;
      grid-column: 1;
    }

    > li:nth-child(3) {
      margin-top: 5rem;
      grid-row: 1;
      grid-column: 3;
    }
  }

  > li {
    border-radius: 0.8rem;
    color: var(--color-4);
    // padding: 1.6rem 2.4rem;
    display: none;
    counter-increment: topList-counter;
    @include rankNumber(var(--color-75), var(--color-54));

    &.show {
      display: grid;
    }

    &:after {
      content: counter(topList-counter);
    }
    @include border-gradient-single(linear-gradient(
      108.74deg,
      rgba(4, 18, 148, 0.6) 0%,
      rgba(255, 255, 255, 0.54) 36.46%,
      rgba(255, 255, 255, 0.3) 73.96%,
      rgba(255, 255, 255, 0.246) 100%
    ),transparent);
    background: linear-gradient(108.74deg, rgba(2, 3, 21, 0.77) 0%, rgba(43, 43, 51, 0.6) 100%);
    border-radius: 8px;
    position: relative;

    

    > * {
      z-index: 1;
    }

    &:nth-child(1) {
      @include rankNumber(var(--toplist-ranking-second-color), var(--color-50), false);
      background: linear-gradient(90deg, #bc9105 1.79%, #ffef64 98.63%);
    }

    &:nth-child(2) {
      @include rankNumber(var(--toplist-ranking-first-color), var(--color-50), false);
      background: linear-gradient(90deg, #6c6c6c 0.04%, #dfdfdf 99.79%);
    }

    &:nth-child(3) {
      @include rankNumber(var(--toplist-ranking-third-color), var(--color-4), false);
      background: linear-gradient(90deg, #c96b0e 2.58%, #ffa54b 99.94%);
    }
  }
}

.loadMore {
  margin-top: 2.4rem;
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-left: auto;
  margin-right: auto;

  &.hide {
    display: none;
  }
  @include border-gradient-single(linear-gradient(
      108.74deg,
      rgba(4, 18, 148, 0.6) 0%,
      rgba(255, 255, 255, 0.54) 36.46%,
      rgba(255, 255, 255, 0.3) 73.96%,
      rgba(255, 255, 255, 0.246) 100%
    ),transparent);

  > a {
    // border-radius: 8px;
    position: relative;
    z-index: 1;
    font-size: 2rem;
    line-height: 2rem;
    min-height: 6rem;
    background-color: transparent;
    color: white !important;
    border: none;
  }
}
