//
// avatar.scss
//

.avatar-item {
    align-items: center;
    background-color: $primary;
    color: $white;
    display: flex;
    font-weight: $font-weight-medium;
    justify-content: center;
    border: 2px solid var(--#{$prefix}secondary-bg);
    position: relative;
    @include border-radius(50%);
    
    img {
        @include border-radius(50%);
        overflow: hidden;
        object-fit: cover;

    }

}

.avatar-badge {
    position: absolute;
    inset-block-start: -6px;
    inset-inline-end: -0.375rem;
    width: 18px;
    height: 18px;
    @include font-size(8px);
    border: 2px solid $white;
    @include border-radius(50%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.avatar-online::before {
    position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    @include border-radius(50%);
    inset-inline-end: 0;
    inset-block-end: 0;
    border: 2px solid $white;
    background-color: var(--#{$prefix}success);
}

// Avatar Group
.avatar-group {
    padding-left: 12px;
    display: flex;
    flex-wrap: wrap;

    .avatar-item {
        margin-left: -12px;
        transition: all 0.2s;

        &:hover {
            position: relative;
            transform: translateY(-2px);
            z-index: 1;
        }
    }
}

// Mixin to set aspect ratio using padding
@mixin aspect-ratio($ratio) {
    padding-top: $ratio;
}

// Image wrapper styles
.image-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;

    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        @include position-align(absolute, 0, null, null, 0);
    }
}

// Aspect ratios
.image-1x1 {
    @include aspect-ratio(100%);
}

.image-4x3 {
    @include aspect-ratio(75%);
}

.image-3x2 {
    @include aspect-ratio(66.67%);
}

.image-16x9 {
    @include aspect-ratio(56.25%);
}