@import "../settings/variables";

@mixin overlay() {
  &::after {
    border-radius: 100%;
    content: "";
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    transition: $default-trans;
    width: 100%;
  }
}

.avatar {
  $root: &;

  align-items: center;
  background-color: $avatar-background-color;
  border-radius: 100%;
  color: $avatar-text-color;
  cursor: default;
  display: inline-flex;
  justify-content: center;
  overflow: hidden;
  position: relative;

  &--xl {
    font-size: $avatar-font-size-xl;
    height: $avatar-background-size-xl;
    width: $avatar-background-size-xl;
    min-height: $avatar-background-size-xl;
    min-width: $avatar-background-size-xl;

    svg {
      height: $avatar-font-size-xl;
      width: $avatar-font-size-xl;
    }
  }

  &--lg {
    font-size: $avatar-font-size-lg;
    height: $avatar-background-size-lg;
    width: $avatar-background-size-lg;
    min-height: $avatar-background-size-lg;
    min-width: $avatar-background-size-lg;
    svg {
      height: $avatar-font-size-lg;
      width: $avatar-font-size-lg;
    }
  }

  &--md {
    font-size: $avatar-font-size-md;
    height: $avatar-background-size-md;
    width: $avatar-background-size-md;
    min-height: $avatar-background-size-md;
    min-width: $avatar-background-size-md;

    svg {
      height: $avatar-font-size-md;
      width: $avatar-font-size-md;
    }
  }

  &--clickable {
    cursor: pointer;
  }

  &--disabled {
    background-color: $core-gray-85;
    cursor: default;
  }

  &:hover,
  &--hover,
  &--disabled,
  &--disabled &__portrait {
    &::after {
      background-color: $core-white;
      opacity: 0.5;
    }
  }

  &--clickable {
    &:hover {
      #{$root}__portrait {
        &::after {
          opacity: 0.5;
        }
      }
    }

    #{$root}__portrait {
      &::after {
        background-color: $core-black;
      }
    }
  }

  &__portrait {
    background-color: $core-white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100%;
    width: 100%;

    @include overlay();
  }

  &__icon {
    @include overlay();

    display: inline-flex;
  }

  &__label {
    text-transform: $avatar-text-transform;
  }
}