packages/core/styles/components/avatar.pcss

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --ifm-avatar-intro-margin: 1rem;
  --ifm-avatar-intro-alignment: inherit;
  --ifm-avatar-photo-size-sm: 2rem;
  --ifm-avatar-photo-size-md: 3rem;
  --ifm-avatar-photo-size-lg: 4rem;
  --ifm-avatar-photo-size-xl: 6rem;
}

.avatar {
  display: flex;

  &__photo-link {
    display: block;
  }

  &__photo {
    border-radius: 50%;
    height: var(--ifm-avatar-photo-size-md);
    overflow: hidden;
    width: var(--ifm-avatar-photo-size-md);

    &--sm {
      height: var(--ifm-avatar-photo-size-sm);
      width: var(--ifm-avatar-photo-size-sm);
    }

    &--lg {
      height: var(--ifm-avatar-photo-size-lg);
      width: var(--ifm-avatar-photo-size-lg);
    }

    &--xl {
      height: var(--ifm-avatar-photo-size-xl);
      width: var(--ifm-avatar-photo-size-xl);
    }

    & + ^&__intro {
      margin-left: var(--ifm-avatar-intro-margin);
    }
  }

  &__intro {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    justify-content: center;
    text-align: var(--ifm-avatar-intro-alignment);
  }

  &__name {
    font: bold var(--ifm-h4-font-size) / var(--ifm-heading-line-height)
      var(--ifm-font-family-base);
  }

  &__subtitle {
    margin-top: 0.25rem;
  }

  &--vertical {
    --ifm-avatar-intro-alignment: center;
    --ifm-avatar-intro-margin: 0.5rem;

    align-items: center;
    flex-direction: column;

    ^&__intro {
      margin-left: 0; /* Reset the margin added in the horizontal layout. */
    }
  }
}