challengeCardOnGoing.scss

@import 'src/styles/base/typo-variables';
@import 'src/styles/base/color';

.cardContent {
  background: transparent;
  &.onGoing {
    border: 1px solid $grey-bright;
    background: inherit !important;
    .challengeTitle {
      margin-top: 0;
    }
  }
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.titleBlock {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: -1.5rem;
  background: $dark-light-2;
  width: fit-content;
  padding: 0 1rem;
  max-width: 235px;
}

.notifChallenge {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 4px;
  top: 4px;
  width: 1.25rem;
  height: 1.25rem;
  color: $dark-light;
  border-radius: 50%;
  border: 1px solid $dark-light;
  z-index: 1;
  background: $blue-radial-gradient;
  font-size: 12px;
}

.smallCard {
  background: $grey-linear-gradient-background;
  max-height: 90px;

  @media all and(max-height: 800px) {
    max-height: 85px;
  }
  @media all and(max-height: 730px) {
    max-height: 70px;
  }

  &.finished {
    border: 1px solid #7b7b7b;
    background: $dark-light-2;
    & > * {
      color: $grey-dark !important;
    }
  }

  &.duelCard {
    background: $dark-3;
    border: solid 1px rgba(97, 240, 242, 0.5);
    &.active {
      background: $grey-linear-gradient-background;
    }
    span {
      justify-content: space-between !important;
    }
  }

  &.goDuel {
    background: $blue-gradient;
    span {
      color: $dark-light-2 !important;
      justify-content: space-between !important;
      font-weight: 700;
    }
  }

  span.MuiButton-label {
    display: flex;
    justify-content: flex-start;
    padding: 1rem 0.5rem;
    color: $grey-bright;
    transition: all 300ms ease;
    text-transform: capitalize;

    .content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-transform: capitalize;
      .stars {
        display: flex;
        gap: 2px;
      }
    }
    .spinner-container {
      height: 3.75rem;
      width: 3.75rem;
      margin: auto;
    }
    .cardIcon {
      margin-right: 1rem;
    }
    span {
      font-size: 1.1rem;
      font-weight: 700;
      @media all and(max-height: 700px) {
        font-size: 1rem;
      }
    }
    .challengeminIcon {
      filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.55));
    }

    .starCount {
      display: flex;
      align-items: center;
      margin: 0;
      span {
        margin: 0;
      }
      .blueNumber {
        font-weight: 900;
        color: $blue-light;
        margin: 0 0.3rem 0 0.7rem;
      }
    }
    .finalDuel {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      .starCount {
        span {
          font-size: 1rem;
          font-weight: 500;
        }
        .blueNumber {
          margin-left: 0;
        }
      }
      &.result {
        span {
          margin-bottom: 0.2rem;
          font-weight: 600;
          font-size: 1rem;
        }
      }
    }
  }
}