@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-avatar-color: $ink-color-white !default;
$ink-avatar-bg-color: $ink-color-grey-4 !default;
$ink-avatar-size-sm: 80px !default;
$ink-avatar-size-md: 104px !default;
$ink-avatar-size-lg: 128px !default;
$ink-avatar-border-radius: $ink-border-radius-md !default;

.ink-avatar {
  width: $ink-avatar-size-md;
  height: $ink-avatar-size-md;
  color: $ink-avatar-color;
  font-size: $ink-avatar-size-md / 2.5;
  line-height: $ink-avatar-size-md;
  text-align: center;
  border-radius: $ink-avatar-border-radius;
  background: $ink-avatar-bg-color;
  box-shadow: 0 0 50px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;

  /* elements */
  &__img {
    width: 100%;
    height: 100%;
  }

  /* modifiers */
  &--large {
    width: $ink-avatar-size-lg;
    height: $ink-avatar-size-lg;
    font-size: $ink-avatar-size-lg / 2.5;
    line-height: $ink-avatar-size-lg;
  }

  &--small {
    width: $ink-avatar-size-sm;
    height: $ink-avatar-size-sm;
    font-size: $ink-avatar-size-sm / 2.5;
    line-height: $ink-avatar-size-sm;
  }

  &--circle {
    border-radius: $ink-border-radius-circle;
    background-clip: border-box;
    overflow: hidden;
  }
}