@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";  

.analytics__card {
    background: 
    linear-gradient(
      to bottom right,
      rgba(20, 20, 20, 0.85), /* Dark tint */
      rgba(30, 30, 30, 0.85)  /* Slightly lighter for depth */
    ),
    url('../../../../images/waves.svg');
  padding: 1rem 1.5rem;
  background-position: center;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  flex: 0 0 280px;
  position: relative;

  @media only screen and (max-width: 1000px) {
    flex: 0 0 270px;
    padding: 1.2rem 1.2rem;
  }

  &__top {
    span {
      display: flex;
      justify-content: space-between;

      h2 {
        color: variables.$col-white;
        font-weight: 500;
        font-size: .85rem;

        @media only screen and (max-width: 1000px) {
          font-size: .85rem;
        }
      }
    }

    p {
      color: variables.$col-white;
      font-size: .75rem !important;
      font-weight: 500;
      opacity: .9;
    }

    &--icon {
      height: 30px;
      width: 30px;
      border-radius: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(255, 140, 0, 0.15);
      position: absolute;
      right: 1rem;
      top: 1rem;
      color: #D37738;
    }
  }

  &__bottom {
    padding-top: 0.7rem;

    h3 {
      font-weight: 500;
      font-size: 1.1rem;
      color: variables.$col-white;

      @media only screen and (max-width: 1000px) {
        font-size: 0.95rem;
      }
    }
  }
}

// Save 
.analytics__card--save {
  @extend .analytics__card;
}

// Invest 
.analytics__card--invest {
  @extend .analytics__card;
}


// Skeleton style (same layout)
.skeleton__card {
  @extend .analytics__card;
  position: relative;
  overflow: hidden;

  .skeleton__top,
  .skeleton__bottom {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }

  .skeleton__title,
  .skeleton__desc,
  .skeleton__amount,
  .skeleton__icon {
    background: rgba(255, 255, 255, 0.07);
    border-radius: 4px;
    animation: skeleton-loading 1.2s ease-in-out infinite;
  }

  .skeleton__title {
    width: 60%;
    height: 14px;
  }

  .skeleton__desc {
    width: 90%;
    height: 10px;
  }

  .skeleton__icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.07);
  }

  .skeleton__amount {
    width: 70%;
    height: 18px;
    margin-top: 0.5rem;
  }
}

// Skeleton animation
@keyframes skeleton-loading {
  0% {
    background-color: rgba(255, 255, 255, 0.07);
  }
  50% {
    background-color: rgba(255, 255, 255, 0.15);
  }
  100% {
    background-color: rgba(255, 255, 255, 0.07);
  }
}