@use 'sass:map';

@use './shared' as *;
@use './design' as *;

$avatar: () !default;
$avatar: map.merge(
  (
    color: value('color-white'),
    bg-color: value('fill-color-secondary'),
    b-color: value('border-color-base'),
    b-width: value('border-width'),
    b-style: value('border-style'),
    size: 32px,
    radius: value('radius-base'),
    series-span: 8px,
    image-fit: 'cover',
    group-offset: -8px
  ),
  $avatar
);

.#{$namespace}-avatar {
  &-vars {
    @include define-preset-values('avatar', $avatar);
  }

  @include basis {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: value('avatar-size');
    height: value('avatar-size');
    overflow: hidden;
    line-height: 1;
    color: value('avatar-color');
    vertical-align: middle;
    user-select: none;
    background-color: value('avatar-bg-color');
    border-radius: value('avatar-radius');
  }

  & + & {
    margin-inline-start: value('avatar-series-span');
  }

  &--circle {
    border-radius: 50%;
  }

  &--border {
    border: value('avatar-b-width') value('avatar-b-style') value('avatar-b-color');
  }

  &--small {
    @include define-preset-values(
      'avatar',
      (
        size: 26px
      )
    );
  }

  &--large {
    @include define-preset-values(
      'avatar',
      (
        size: 40px
      )
    );
  }

  &__image {
    height: 100%;
    pointer-events: none;
    object-fit: value('avatar-image-fit');
  }

  &__text {
    text-align: center;
    white-space: nowrap;
  }

  $self: #{&};

  @at-root {
    &-group {
      @include basis {
        display: inline-flex;
      }

      &--vertical {
        flex-direction: column;
      }

      &__item {
        position: relative;
        background-color: value('bg-color-base');

        &--rest {
          cursor: pointer;
        }

        &:not(:first-child) {
          margin-inline-start: value('avatar-group-offset');
        }

        & > #{$self} {
          border: value('avatar-b-width') value('avatar-b-style') value('avatar-b-color');
        }
      }

      &--circle &__item,
      &--circle #{$self} {
        border-radius: 50%;
      }

      &--vertical &__item {
        &:not(:first-child) {
          margin-inline-start: 0;
          margin-top: value('avatar-group-offset');
        }
      }

      &__rest {
        display: flex;
      }
    }
  }
}