@import "./variables";

.#{$component-prefix}avatar {
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-family: $avatar-font-family;
  font-weight: $avatar-font-weight;
  color: $avatar-color;
  text-align: center;
  background: $avatar-background-color;

  &--circle {
    border-radius: var(--border-radius-max, $border-radius-max);
  }

  &--square {
    border-radius: 0;
  }

  &--mini {
    width: $avatar-size-mini;
    height: $avatar-size-mini;
    font-size: $avatar-font-size-mini;

    &.#{$component-prefix}avatar--rounded {
      border-radius: $avatar-border-radius-mini;
    }
  }

  &--small {
    width: $avatar-size-small;
    height: $avatar-size-small;
    font-size: $avatar-font-size-small;

    &.#{$component-prefix}avatar--rounded {
      border-radius: $avatar-border-radius-small;
    }
  }

  &--medium {
    width: $avatar-size-medium;
    height: $avatar-size-medium;
    font-size: $avatar-font-size-medium;

    &.#{$component-prefix}avatar--rounded {
      border-radius: $avatar-border-radius-medium;
    }
  }

  &--large {
    width: $avatar-size-large;
    height: $avatar-size-large;
    font-size: $avatar-font-size-large;

    &.#{$component-prefix}avatar--rounded {
      border-radius: $avatar-border-radius-large;
    }
  }
}