@use '../../partials/flex';

.avatar-container {
  display: inline-flex;
  width: 42px;
  height: 42px;
  border-radius: var(--bo-radius);
  position: relative;

  &__large {
    width: var(--av-large);
    height: var(--av-large);
  }
  &__normal {
    width: var(--av-normal);
    height: var(--av-normal);
  }

  &__small {
    width: var(--av-small);
    height: var(--av-small);
  }

  &__extra-small {
    width: var(--av-extra-small);
    height: var(--av-extra-small);
  }

  > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    background-color: var(--bg-surface-hover);
  }

  .avatar__border {
    @extend .cp-fx__row--c-c;
    
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
    border-radius: inherit;

    .text {
      color: white;
    }
    &--active {
      @extend .avatar__border;
      box-shadow: var(--bs-surface-border);
    }
  }
}