@import "../Tokens/tokens.scss";
@import "../../common/scss/helpers";

.initials-badge {
  font-family: Nunito, Lato, 'Trebuchet MS', sans-serif;
  width: $baseUnit * 5;
  height: $baseUnit * 5;
  border-radius: 50%;
  color: #1D1C28;
  font-size: 16px;
  line-height: 1em;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: -1px;
  cursor: default;
  user-select: none;

  &.small {
    width: $baseUnit * 3;
    height: $baseUnit * 3;
    font-size: 10px;
    letter-spacing: -1px;
  }

  &.large {
    width: $baseUnit * 13;
    height: $baseUnit * 13;
    font-size: 42px;
    letter-spacing: -3.5px;

    @media(max-width: 1000px) {
      width: $baseUnit * 10;
      height: $baseUnit * 10;
      font-size: 28px;
    }
  }

  &.swansDown {
      background: $swansDown;
  }

  &.potPourri {
    background: $potPourri;
  }

  &.peppermint {
    background: $peppermint;
  }

}