@import './variables';

.s-avatar {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: normal;
  position: relative;
  text-align: center;
  vertical-align: middle;
  overflow: hidden;
  width: var(--s-avatar-size);
  height: var(--s-avatar-size);

  @include has-theme-bg {
    color: map-deep-get($material-dark-theme, 'text', 'primary');
  }

  &:not(.tile) {
    border-radius: $avatar-border-radius;
  }

  .s-icon,
  img,
  svg {
    color: inherit;
    border-radius: inherit;
    display: inline-flex;
    height: inherit;
    width: inherit;
  }
}