_layout.scss

@include export-module('avatar-layout') {
  .e-avatar {
    align-content: center;
    align-items: center;
    background-color: $avatar-base-background-color;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: $avatar-base-border-radius;
    color: $avatar-base-text-color;
    display: inline-flex;
    font-family: $font-family;
    font-size: $avatar-base-font-size;
    font-weight: $avatar-base-font-weight;
    height: $avatar-base-height;
    justify-content: center;
    overflow: hidden;
    position: relative;
    width: $avatar-base-width;
    @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
      line-height: $avatar-base-line-height;
    }

    img {
      height: $avatar-base-img-height;
      width: auto;
    }

    &.e-avatar-circle {
      border-radius: $avatar-circle-border-radius;
    }

    &.e-avatar-xsmall {
      font-size: $avatar-xsmall-font-size;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
        height: 24px;
        line-height: $avatar-base-xsmall-line-height;
        width: 24px;
      }
    }

    &.e-avatar-small {
      font-size: $avatar-small-font-size;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
        height: 32px;
        line-height: $avatar-base-small-line-height;
        width: 32px;
      }
    }

    &.e-avatar-large {
      font-size: $avatar-large-font-size;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
        height: 48px;
        line-height: $avatar-base-large-line-height;
        width: 48px;
      }
    }

    &.e-avatar-xlarge {
      font-size: $avatar-xlarge-font-size;
      @if ($skin-name == 'tailwind' or $skin-name == 'tailwind-dark') {
        height: 56px;
        line-height: $avatar-base-xlarge-line-height;
        width: 56px;
      }
    }
  }
}