mars-interface/src/components/common/Header/IncentivesButton.module.scss

@import 'src/styles/master';

.button {
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: nowrap;
  border-radius: $borderRadiusXXL;
  height: rem-calc(34);
  @include padding(0.5, 3, 0);
  @include margin(0, 2, 0, 0);
  @include typoS;
  cursor: pointer;
  color: $colorWhite;
  border: 1px solid $alphaWhite60;
  outline: none;
  background: $alphaBlack10;

  .marsAmount {
    margin: 0 space(1);
  }

  svg {
    margin-top: space(-0.5);
    height: rem-calc(19);
    width: auto;
  }

  .balance {
    font-weight: $fontWeightRegular;
    position: relative;
    display: flex;
    align-items: center;
    gap: space(1);
    height: 100%;
    padding-inline-start: rem-calc(8);
  }

  &:hover {
    border: 1px solid $colorWhite;
    background-color: $alphaWhite10;
  }
}

.buttonHighlight {
  @include layoutIncentiveButton;
}

.details {
  display: flex;
  position: absolute;
  flex-direction: column;
  justify-content: flex-start;
  max-width: calc(100vw - 2 * #{$spacingBase}px);
  top: rem-calc(56);
  width: rem-calc(390);
  right: space(1);
  z-index: 100;
  @include layoutPopover;
}

.tooltip {
  position: absolute;
  top: rem-calc(12);
  right: rem-calc(16);

  svg {
    color: $colorSecondaryDark;
  }
}

.detailsHeader {
  display: flex;
  flex: 0;
  flex-wrap: nowrap;
  width: 100%;
  @include padding(4, 0);
  @include margin(0);
  position: relative;
  border-bottom: 1px solid $alphaBlack20;
  text-align: center;
}

.detailsHead {
  @include margin(0);
  @include typoScaps;
  color: $colorSecondaryDark;
  width: 100%;
}

.detailsBody {
  flex: 0;
  width: 100%;
  @include padding(4);
  color: $colorSecondaryDark;

  .successContainer {
    display: flex;
    flex-direction: column;
    align-items: center;

    .successTitle {
      text-align: center;
      color: $colorSecondaryDark;
      @include margin(0, 0, 4);
    }

    .succcessTxHash {
      display: flex;
      @include margin(0, 0, 4);

      .label {
        @include margin(0, 2, 0, 0);
        opacity: 0.4;
      }
    }
  }

  .container,
  .total {
    display: flex;
    flex: 0 0 100%;
    @include padding(4, 0, 0);
    border-bottom: 1px solid $colorSecondaryDark;
    flex-wrap: wrap;

    &.info {
      justify-content: center;
      @include padding(4, 0);

      p {
        @include margin(0, 0, 2);
      }
    }

    .position {
      display: flex;
      flex: 0 0 100%;
      flex-wrap: nowrap;
      @include padding(0, 0, 4);

      .head {
        @include typoScaps;
      }

      p {
        width: 100%;
        @include margin(0);
      }

      .label {
        flex: 1;
        min-height: rem-calc(12);
        display: flex;
        flex-wrap: wrap;

        .subhead {
          color: $colorSecondaryDark;
          opacity: 0.6;
          @include margin(1, 0);
          @include typoS;
        }

        .token {
          @include typoM;
        }
      }

      .value {
        min-height: rem-calc(12);
        flex: 0 0 rem-calc(76);
        display: flex;
        flex-wrap: wrap;
        @include margin(0, 0, 0, 3);

        p {
          text-align: end;
        }

        .headline {
          @include typoXXScaps;
          font-weight: $fontWeightSemibold;
        }

        .tokenAmount {
          width: 100%;
          text-align: right;
          @include typoM;
        }

        .tokenValue {
          width: 100%;
          text-align: right;
          @include margin(1, 0);
          @include typoS;
          opacity: 0.6;
        }
      }
    }
  }

  .total {
    border-bottom: none;

    .position {
      .label {
        .subhead {
          opacity: 1;
          font-weight: $fontWeightSemibold;
        }
      }
    }
  }

  .claimButton {
    display: flex;
    justify-content: center;
    flex: 0 0 100%;
    margin: 0 auto;
    @include padding(6, 0, 0);
    flex-wrap: wrap;

    button {
      width: 100%;
    }
  }
}

.clickAway {
  display: block;
  position: fixed;
  z-index: 99;
  height: 100vh;
  width: 100vw;
  left: 0;
  top: 0;

  &:hover {
    cursor: pointer;
  }
}

.tooltip {
  top: 0;
  right: 0;
}

@media only screen and (min-width: $bpMediumLow) {
  .wrapper {
    position: relative;
  }

  .details {
    right: unset;
    top: rem-calc(38);
    left: rem-calc(-155);
  }

  .detailsBody {
    .claimButton {
      button {
        width: rem-calc(160);
      }
    }
  }
}

@keyframes moveGradient {
  50% {
    background-position: 100% 50%;
  }
}