@import '../../marketplace.css';

:root {
  --avatarSize: 40px;
  --avatarSizeMedium: 60px;
  --avatarSizeLarge: 96px;

  --bgColorTop: var(--marketplaceColorLight);
  --bgColorBottom: var(--marketplaceColor);

  /* Base for all avatars */
  --avatarBase: {
    font-family: 'sofiapro', Helvetica, Arial, sans-serif;
    border-radius: 50%;

    /* Position possible initials to the center of the component */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Colors */
    background-image: linear-gradient(-180deg, var(--bgColorTop) 0%, var(--bgColorBottom) 100%);
    color: var(--matterColorLight);

    &:hover {
      text-decoration: none;
    }
  }
}

/* Small Avatar */

.root {
  /* Font is specific to this component, but defining it in marketplace.css makes it easier
   * to change font if brand look-and-feel needs such changes.
   */
  @apply --avatarBase;

  /* Layout */
  width: var(--avatarSize);
  height: var(--avatarSize);
}

.initials {
  font-size: 14px;
  font-weight: var(--fontWeightBold);
  padding-bottom: 4px;
}

.avatarImage {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

/* Medium Avatar */

.mediumAvatar {
  @apply --avatarBase;

  /* Fixed dimensions */
  width: var(--avatarSizeMedium);
  height: var(--avatarSizeMedium);
}

.mediumAvatar .initials {
  font-size: 20px;
  font-weight: var(--fontWeightSemiBold);
  padding-bottom: 5px;
}

/* Large Avatar */

.largeAvatar {
  @apply --avatarBase;

  /* Fixed dimensions */
  width: var(--avatarSizeLarge);
  height: var(--avatarSizeLarge);
}

.largeAvatar .initials {
  font-size: 30px;
  font-weight: var(--fontWeightSemiBold);
  padding-bottom: 6px;
}

.bannedUserIcon {
  width: 100%;
  height: 100%;
}
