@use "design";

.perkIcon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex-grow: 0; // Just in case
  flex-shrink: 0; // Just in case

  &.size50 {
    border-radius: 8px;
    width: 50px;
    height: 50px;

    svg {
      max-width: 38px;
      max-height: 38px;
    }
  }

  &.size25 {
    border-radius: 4px;
    width: 25px;
    height: 25px;

    svg {
      max-width: 20px;
      max-height: 20px;
    }
  }

  &:not(.iconOnly) {
    &.size65 {
      border-radius: 13px;
      width: 65px;
      height: 65px;
    }

    &.loans {
      background-color: design.$perk-color-loans;
    }

    &.ewa {
      background-color: design.$perk-color-ewa;
    }

    &.education {
      background-color: design.$perk-color-education;

      svg {
        // Visually align the icon
        margin-bottom: -6px;
      }
    }

    &.award {
      background-color: design.$perk-color-awards;
    }

    &.message {
      background-color: design.$perk-color-messages;
    }

    &.save {
      background-color: design.$perk-color-save;
    }
  }

  &.message {
    font-size: 32px;
  }
}

// Headers at the top of big cards

.perkHeader {
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

.perkHeaderIcon {
  margin: -2.5rem auto 0 auto;
}

// Onboarding pitches

.pitchBody {
  color: design.$color-on-surface-variant;
}

.pitchIcon {
  flex-shrink: 0;
  text-align: center;

  width: 2.5rem;
  padding-top: 0; // visually align icon

  font-size: 22px;

  img {
    margin: 0 auto;
  }

  svg {
    margin: 0 auto;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
  }
}

.pitchHeading {
  font-size: 19px;
  font-weight: design.$weight-display-bold;
}