@use 'sass:string';
@use '../theme/avatar.tokens' as avatar;
@use '../theme/palette.tokens' as palette;
@use '../theme/typography.tokens' as typography;

@mixin full-size-circle() {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.pa-avatar {
  border-radius: 50%;
  cursor: default;
  display: flex;
  position: relative;

  &.no-avatar {
    background-image: url('data:image/svg+xml,%3csvg width="100%25" height="100%25" xmlns="http://www.w3.org/2000/svg"%3e%3crect width="100%25" height="100%25" fill="none" rx="100" ry="100" stroke="%23' + string.slice(
        #{palette.$color-neutral-light},
        2
      ) + '" stroke-width="2" stroke-dasharray="4%2c 6" stroke-dashoffset="0" stroke-linecap="butt"/%3e%3c/svg%3e');
  }
  &.pa-avatar-tiny {
    @include typography.font-size(xxs);
    @include typography.line-height(m);
    height: avatar.$size-avatar-tiny;
    width: avatar.$size-avatar-tiny;
  }
  &.pa-avatar-small {
    @include typography.font-size(s);
    @include typography.line-height(m);
    height: avatar.$size-avatar-small;
    width: avatar.$size-avatar-small;
  }
  &.pa-avatar-medium {
    @include typography.size(xl);
    height: avatar.$size-avatar-medium;
    width: avatar.$size-avatar-medium;
  }
  &.pa-avatar-huge {
    @include typography.size(d2-md);
    height: avatar.$size-avatar-huge;
    width: avatar.$size-avatar-huge;
  }

  .pa-avatar-img {
    @include full-size-circle();
    object-fit: cover;
  }

  .pa-avatar-initials {
    background: avatar.$background-color-avatar-default;
    border-bottom: none;
    display: inline-flex;
    font-weight: typography.$font-weight-semi-bold;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    color: palette.$color-dark-stronger;
    @include full-size-circle();

    span {
      margin: auto;
    }

    &.pa-avatar-primary {
      background: avatar.$avatar-primary;
    }

    &.pa-avatar-secondary {
      background: avatar.$avatar-secondary;
    }

    &.pa-avatar-tertiary {
      background: avatar.$avatar-tertiary;
    }
  }
}