sparkletown/sparkle

@import "scss/constants.scss";

$image--size: 30px;
$image--margin: 3px;

.Badges {
  &__container {
    padding: $spacing--lg 0 0 0;
  }

  &__title {
    color: var(--content--over-60a);
    font-size: $font-size--md;
    margin-bottom: $spacing--md;
  }

  &__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
  }

  &__item-image {
    width: $image--size;
    height: $image--size;
    border-radius: $border-radius--max;
    margin: $image--margin $image--margin 0 0;
  }

  &__visits {
    display: flex;
    background-color: $content--under;
    border-radius: $border-radius--xl;
    padding: $spacing--lg;
    justify-content: space-around;
  }

  &__visit {
    display: flex;
    flex-direction: column;
    align-items: center;

    &-value {
      font-weight: 900;
      font-size: $spacing--lg;
    }

    &-label {
      color: var(--content--over-60a);
      font-size: $font-size--md;
    }
  }
}