@import "../../styles/variables.scss";

:host {
  display: inline-block;
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  position: relative;
  background-color: var(--background-muted);

  img {
    width: inherit;
    height: inherit;
    border-radius: inherit;
  }

  &.avatar-size-small {
    width: 20px;
    height: 20px;
  }
  &.avatar-size-large {
    width: 40px;
    height: 40px;
  }
  &.avatar-shape-round {
    border-radius: 2em;
  }
  &.avatar-shape-square {
    border-radius: 0.4em;
  }

  @include theme-colors() using ($name, $color, $contrast, $tint, $shade, $pale) {
    &.avatar-color-#{$name} {
      color: getContrastColor($name);
      background-color: $color;
    }
  }
}

:host(.menu-active) {
  box-shadow: 0px 0px 4px 1px var(--selection);
}