@use 'sass:meta';
@use '../../styles/variables';
@use 'mixin';
@use './avatar-list.scss';

.thy-avatar {
    display: inline-block;
    position: relative;

    &:hover {
        text-decoration: none;
        .avatar-remove {
            visibility: visible;
        }
    }
    .avatar-default {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        overflow: hidden;
        zoom: 1;
        color: variables.$white;
        text-shadow: transparent 0 0 0;
    }
    .avatar-name {
        margin-left: 8px;
        display: inline-block;
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: middle;
    }

    .avatar-remove {
        position: absolute;
        visibility: hidden;
        top: -7px;
        right: -5px;
    }
    .thy-avatar-disabled {
        cursor: variables.$disabled-cursor;
        position: absolute;
        background-color: rgba(variables.$black, 0.3);
        top: 0;
        left: 0;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        &-icon {
            color: variables.$avatar-disabled-color;
        }
    }
}

@each $size, $value in variables.$avatar-sizes {
    .thy-avatar-#{$size} {
        @include mixin.avatarSize($size, $value);
    }
}
