@import '@legends/styles/base.scss';

.error {
  margin-bottom: 1.5rem;
}

.overachieverWrapper {
  @include  container;
  @include breakpoint-down-from(medium-desktop) {
    margin-left: 3rem;
  }

  @include breakpoint-down-from(tablet) {
    margin-left: 0;
  }
}
.overachieverBanner {
  margin-bottom: 1.875rem;
  
}
.rewardsWrapper {
  position: relative;
  z-index: 3;
  @include container;
  user-select: none;

  @include breakpoint-down-from(medium-desktop) {
    margin-left: 3rem;
  }

  @include breakpoint-down-from(tablet) {
    margin-left: 0;
  }
}

.wrapper {
  @include container;
  display: grid;
  position: relative;
  grid-template-columns: 19.3125rem 29.5rem 12.6875rem;
  max-width: 63.375rem;
  margin-bottom: 8.5rem;
  margin-top: 1.875rem;
  gap: .9375rem;

  

  .accountBaseInfoWrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .accountInfoWrapper {
    background: linear-gradient(147.96deg, #191B1F 43.03%, rgba(19, 21, 43, 0.99) 87.21%);
    border-radius: 1rem;
    padding: 1rem 1.75rem 1.75rem 1.75rem;
    color: $secondaryText;
    margin-bottom: .9375rem;
    flex: 0.35;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .accountInfo {
      font-size: 1.125rem;
      padding: 0;
      
      .accountInfoAddress {
        color: $secondaryText;
      }
    }
  }


  .walletBalanceWrapper {
    background: linear-gradient(147.96deg, #191B1F 43.03%, rgba(19, 21, 43, 0.99) 87.21%);
    border-radius: 1rem;
    color: $secondaryText;
    padding: 1.25rem 1.6875rem;
    position: relative;
    flex: 0.65;


    .infoWrapper {
      font-size: .875rem;
      margin-bottom: .5rem;
      .infoIcon {
        margin-left: .375rem;
      }
      
    }

    .balanceAmount {
      color: $mainText;
      display: inline-block;
      font-size: 2rem;
      margin-bottom: .5rem;
      
    }
  }



   .rewardsProjectionWrapper {
    position: relative;
    background: linear-gradient(145.15deg, #191B1F 36.93%, #252320 60.5%, #302B21 70.61%, #4B3F23 80.62%, #765E26 91.72%);

    padding: 2.0625rem 1.5rem;
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;


    .starsBackground {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      mix-blend-mode: Lighten;
      background-position: center;
    }

    .rewardsProjectionTitleWrapper {
      display: flex;
      align-items: center;
      margin-top: .5rem;
      margin-bottom: 1.875rem;

      .rewardsProjectionTitle {
        color: #E9EBF8;
        font-size: .875rem;
        line-height: 1rem;
        font-weight: 300;
      }

      .infoIcon {
        margin-left: .375rem;
        color: #8E98A8;
        vertical-align: middle;
      }   
    }

     .rewardsProjectionStats {
      display: flex;
      flex-direction: column;
      align-items: center;
        .projectionStatLabel {
          font-size: .6875rem;
          font-weight: 400;
          color: $yellow-700;
          display: flex;
          gap: .25rem;
          text-transform: uppercase;

          .ambireLogoWrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            background: $whiteText;
            border-radius: 50%;
            width: 1rem;
            height: 1rem;
          }
          
        }

        .projectionStatValue {
          color: $yellow-700;
          font-size: 1.5rem;
          line-height: 2.75rem;
          font-weight: 400;
        }

        .projectionStatPriceValue {
          font-size: .75rem;
          font-weight: 400;
          color:#FFEDC4;

        }
      }

  }


  .characterWrapper {
    border-radius: 1rem;
    display: flex;
    background: linear-gradient(147.96deg, #191B1F 43.03%, rgba(19, 21, 43, 0.99) 87.21%);
    display: flex;

    .character {
      display: flex;
      flex-direction: column;
      background: #A7B8EA0D;
      border-radius: 1rem;
      min-width: 13.125rem;
      align-self: start;
      align-items: center;
      flex: 1;
      height: 100%;
      
      .currentSeasonBadge {
        margin-bottom: .4375rem;
        width: fit-content;
        background-color: $purple-700;
        padding: .35rem .7rem;
        border-bottom-right-radius: .5rem;
        border-bottom-left-radius: .5rem;
        box-shadow: 0px 4px 4px 0px #00000040 inset;
        gap: .3125rem;
        display: flex;
        color: $whiteText;
        align-self: center;
        font-size: .75rem;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: .0375rem;
        align-items: center;
      }

      .characterNameWrapper {
        display: flex;
        justify-content: space-between;
        padding: 0 1.6875rem;

        .characterName {
          color: $mainText;
          font-size: .75rem;
        }

        .characterLevel {
          color: #8E98A8;
          font-size: .75rem;
          display: flex;
          flex-direction: column;
          align-items: end;
          .characterLevelText {
            color: #8E98A8;
            font-size: .75rem;
          }
        }
      }
      
      .characterImage {
        position: relative;
        width: 12.8125rem;
        height: 12.8125rem;
      }
    }
    
    .characterStatsWrapper {
      background: linear-gradient(147.96deg, #191B1F 43.03%, rgba(19, 21, 43, 0.99) 87.21%);
      border-top-right-radius: 1rem;
      border-bottom-right-radius: 1rem;
      padding: 1.5rem 2.0625rem;    

      .accruidedXpWrapper {
        margin-bottom: .75rem;
        .accruedXpLabel {
          font-size: .875rem;
          color: #8E98A8;

        }
        .infoIcon {
          margin-left: .375rem;
          color: #8E98A8;
          vertical-align: middle;
        }
      }

      .characterItemWrapper {
        display: flex;

        .icon {
          margin-right: 1.5625rem;
        }
        .iconCoin {
          align-self: center;
        }

        .characterItem {
          display: flex;
          flex-direction: column;
          font-size: 0.875rem;
          font-weight: 300;
          line-height: 1.5rem;
          color: $mainText;
          align-self: end;
        }
      }
        .levelWrapper {
          display: flex;
          flex-direction: column;

          .levelInfoTop {
            margin-bottom: 0.125rem;
          }

          .levelInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .startXp {
              color: $green-500;
            }
            .endXp {
              color: $secondaryText;

            }
            .startXp,
            .endXp {
              font-weight: 400;
              font-size: .625rem;
              margin-bottom: .25rem;
            }
            .level {
              color: $secondaryText;
              font-size: .75rem;
              font-weight: 300;
              line-height: 1rem;
              text-align: left;
            }
          }

          .xp {
            font-size: 1.5rem;
            font-weight: 400;
            line-height: 2.75rem;
            z-index: 2;
            color: $neutral-600;

            .xpLabel {
              color: $green-500;
            }
          }

          .levelProgress {
            flex: 1;
            padding: 0.19rem 0.3125rem;
            border-radius: $secondaryBorderRadius;
            background-color: rgba($tertiaryText, 0.3);
            overflow: hidden;
            position: relative;
            min-width: 11.25rem;
            text-align: center;
            font-size: 1rem;

            .levelProgressBarWrapper {
              display: flex;
              justify-content: space-between;
              .level {
                color: $mainText;
                z-index: 3;
                font-size: .75rem;
                font-weight: 300;
              }
            }

            .levelProgressBar {
              position: absolute;
              top: 0;
              left: 0;
              z-index: 1;
              height: 100%;
              background-color: $secondaryAccent;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              white-space: nowrap;
              transition: width 0.3s ease;
            }
          }
        }


        .divider {
          width: 100%;
          height: 1px;
          margin-top: .9375rem;
          margin-bottom: .9375rem;
          border: 0.5px solid #393C48;
          margin: 1.5rem 0;
        }
      
        .leaderboardWrapper {
          

          .leaderboardInfoWrapper {
            display: flex;
            align-items: center;
            gap: .375rem;
            color: #8E98A8;

            .infoIcon {
              color: #8E98A8;
              vertical-align: middle;
            }
          }

          .leaderboardRank {
            line-height: 2.75rem;
            font-size: 1.5rem;
            .trophyIcon {
              color: $neutral-600;
              margin-right: .75rem;
            }
          }
        }
    
  }

  // old styles below

  
  .logoAndBalanceWrapper {
    display: inline-block;
    position: relative;
  }

  
  .characterInfo {
    position: relative;
    z-index: 2;

  

    .characterInfoWrapper {
      display: flex;
      align-items: center;
      gap: 0.3125rem;

      .infoIcon {
        color: $secondaryText;
        cursor: pointer;
      }
    }

   

    .accountInfoAddress {
      color: $secondaryText;
    }

    .kicker {
      font-size: 2.5rem;
      font-weight: 400;
      color: $whiteText;
      margin-bottom: 6.5625rem;
    }

    
      .item {
        min-width: 8.75rem;
        padding: 0.5rem 1.5rem;
        border-radius: $secondaryBorderRadius;
        background-color: $secondaryBackground;
        background-color: rgba($tertiaryText, 0.3);

        font-size: 1.5rem;
        font-weight: 400;
        line-height: 2.75rem;
        text-align: center;
        color: $primaryText;

        .itemTitleRow {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .itemTitle {
            display: block;
            color: $secondaryText;
            font-family: $secondaryFont;
            font-size: 0.875rem;
            line-height: 1.25rem;
            margin-bottom: 0.5rem;
          }

          .progressText {
            font-size: 0.75rem;
            color: $secondaryText;
          }
        }
      }
    }

    .characterAbout {
      font-size: 1rem;
      color: $secondaryText;
      line-height: 1.5;
      margin-bottom: 0.5rem;
    }
  }

  .character {
    // margin-left: 5.3125rem;
    .characterRelativeWrapper {
      // position: relative;

      // .characterImage {
      //   position: relative;
      //   z-index: 2;
      //   width: 15.9375rem;
      //   height: 15.9375rem;
      //   object-fit: contain;
        
      // }
    }
  }

  .characterBlurEffect {
    position: absolute;
    width: 40.1875rem;
    height: 19.0625rem;
    top: 0;
    filter: blur(13.2px);
    background-position: 2rem -19rem;
    opacity: 0.1;
    background-size: 35.3125rem;
    background-repeat: no-repeat;
    right: 0;
    transform: scaleX(-1);
  }

  
  @include breakpoint-down-from(medium-desktop) {
    margin-left: 3rem;
    margin-right: 3rem;
    width: calc(100% - 6rem);
  }

  @include breakpoint-from(small-desktop) {
    // grid-template-columns: 16rem 26rem 11rem;
    .currentSeasonBadge {
      top: -2.75rem;
    }
  }

  @include breakpoint-down-from(small-desktop) {

    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1rem;

    padding-bottom: 1rem;
    .character {
      margin-left: 0;
    }
    
    
    .characterLevelInfoWrapper {
      flex-direction: row;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .characterInfo {

      .characterName {
        font-size: 3rem;
      }

      .characterAbout {
        font-size: 0.875rem;
      }
    }

    .character {
      .characterRelativeWrapper {
        &::before {
          width: 18.75rem;
          height: 4.6875rem;
        }
      }

      .characterImage {
        width: 30rem;
        height: 30rem;
      }
    }
  }

  @include breakpoint-down-from(tablet) {
    margin-left: 0;

    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;

    
  }
}


.unknownCharacterWrapper {
  display: flex;
  justify-content: space-between;
  background: linear-gradient(147.96deg, #191B1F 43.03%, rgba(19, 21, 43, 0.99) 87.21%);
  position: relative;
  padding: 0rem 2.5rem 0rem 2.375rem;
  border-radius: 1rem;

  .unknownCharacterContentWrapper {
    display: flex;
    justify-content: space-between;
    flex: 1;
    
    .unknownCharacterContent {

      .currentSeasonBadge {
        margin-bottom: 1.5rem;
        width: fit-content;
        background-color: $purple-700;
        padding: .35rem .7rem;
        border-bottom-right-radius: .5rem;
        border-bottom-left-radius: .5rem;
        box-shadow: 0px 4px 4px 0px #00000040 inset;
        gap: .3125rem;
        display: flex;
        color: $whiteText;
        align-self: center;
        font-size: .75rem;
        font-weight: 500;
        line-height: 100%;
        letter-spacing: .0375rem;
        align-items: center;
      } 

      .accountInfo {
        font-size: 1.125rem;
        padding: 0;
        margin-bottom: 1.5rem;
        width: fit-content;
        
        .accountInfoAddress {
          color: $secondaryText;
        }
      }


      .unknownCharacterLevelInfoWrapper {

        .claimableXpText {
          font-size: 1.5rem;
          line-height: 2.75rem;
          font-weight: 400;
          margin-bottom: .625rem;
        }
        .claimableBalance {
          color: #02F3BF;
          font-weight: 600;
        }
        .claimXpButton {
          @include primary-button;
          cursor: pointer;
          max-width: 10.625rem;
          height: 4rem;
          font-weight: 400;
          font-size: 1.25rem;
          margin-bottom: 2.8125rem;
        }
      }

    }
        
  }

  .claimRewardsBubble {
    position: absolute;
    width: 10rem;
    opacity: 1;
    border-radius: 0.5rem;
    top: 3rem;
    left: -5rem;
    padding-top: 0.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    
    background: linear-gradient(90deg, rgba(106, 111, 134, 0.3) 0%, rgba(25, 27, 32, 0.3) 100%);

    .claimRewardsBubbleText {
      font-weight: 400;
      font-size: .75rem;
      vertical-align: middle;
      color: $alternativeText;
    }
  }



  .character {
    margin-left: 0;
    margin-right: 1.4375rem;
    position: relative;
    z-index: 2;

    .characterRelativeWrapper {
      .characterImage {
        width: 14.6875rem;
        height: 14.6875rem;
        position: relative;
        z-index: 4;
      }
    }
  }

  .characterPodium {
    background-image: linear-gradient(180deg, #C587C5 17.31%, #0F03A4 100%);
    filter: blur(5.6px);

    width: 12.5625rem;
    height: 2.5rem;
    opacity: 1;
    border-radius: 1rem;

    position: absolute;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    z-index: 1;

    border: 0.25rem solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
 

  }
}
