semi-design/packages/semi-foundation/avatar/avatar.scss

@import './variables.scss';
@import './mixin.scss';

$module: #{$prefix}-avatar;
$colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'light-green', 'lime', 'orange', 'pink',
    'purple', 'red', 'teal', 'violet', 'yellow';

.#{$module} {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;

    &:focus-visible {
        outline: $width-avatar-outline solid $color-avatar-outline-focus;
    }

    &-focus {
        outline: $width-avatar-outline solid $color-avatar-outline-focus;
    }

    &-no-focus-visible {
        &:focus-visible {
            outline: none;
        }
    }

    .#{$module}-label {
        display: flex;
        align-items: center;
        @include font-size-regular;
        font-weight: 600;
    }

    &-content {
        user-select: none;
    }

    &-extra-extra-small {
        width: $width-avatar_extra_extra_small;
        height: $width-avatar_extra_extra_small;
        border-radius: $radius-avatar_extra_extra_small;

        .#{$module}-content {
            transform-origin: center;
            transform: scale(0.8);
        }

        .#{$module}-label {
            font-size: $font-avatar_extra_extra_small-size;
            line-height: $font-avatar_extra_extra_small-lineHeight;
        }
    }

    &-extra-small {
        width: $width-avatar_extra_small;
        height: $width-avatar_extra_small;
        border-radius: $radius-avatar_extra_small;

        .#{$module}-content {
            transform-origin: center;
            transform: scale(0.8);
        }

        .#{$module}-label {
            font-size: $font-avatar_extra_small-size;
            line-height: $font-avatar_extra_small-lineHeight;
        }
    }

    &-small {
        width: $width-avatar_small;
        height: $width-avatar_small;
        border-radius: $radius-avatar_small;

        .#{$module}-label {
            @include font-size-small;
        }
    }

    &-default {
        width: $width-avatar_default;
        height: $width-avatar_default;
        border-radius: $radius-avatar_default;

        .#{$module}-label {
            @include font-size-header-5;
        }
    }

    &-medium {
        width: $width-avatar_medium;
        height: $width-avatar_medium;
        border-radius: $radius-avatar_medium;

        .#{$module}-label {
            @include font-size-header-4;
        }
    }

    &-large {
        width: $width-avatar_large;
        height: $width-avatar_large;
        border-radius: $radius-avatar_large;

        .#{$module}-label {
            @include font-size-header-1;
        }
    }

    &-extra-large {
        width: $width-avatar_extra_large;
        height: $width-avatar_extra_large;
        border-radius: $radius-avatar_extra_large;

        .#{$module}-label {
            font-size: $font-avatar_extra_large-size;
            line-height: $font-avatar_extra_large-lineHeight;
        }
    }

    &-circle {
        border-radius: $radius-avatar;
    }

    &-image {
        background-color: transparent;
    }

    & > img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    &-hover {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    &:hover {
        cursor: pointer;
    }
}

.#{$module}-group {
    display: inline-block;

    .#{$module} {
        box-sizing: border-box;

        &:first-child {
            margin-left: 0;
        }
    }

    .#{$module}-extra-large {
        border: $width-avatar_extra_large-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_extra_large-marginLeft;
    }

    .#{$module}-large {
        border: $width-avatar_large-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_large-marginLeft;
    }

    .#{$module}-medium {
        border: $width-avatar_medium-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_medium-marginLeft;
    }

    .#{$module}-default {
        border: $width-avatar_default-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_default-marginLeft;
    }

    .#{$module}-small {
        border: $width-avatar_small-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_small-marginLeft;
    }

    .#{$module}-extra-small {
        border: $width-avatar_extra_small-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_extra_small-marginLeft;
    }

    .#{$module}-extra-extra-small {
        border: $width-avatar_extra_extra_small-border $color-avatar_default-border-default solid;
        margin-left: $spacing-avatar_extra_extra_small-marginLeft;
    }

    @for $i from 0 through 20 {
        .#{$module}-item-start-#{$i} {
            z-index: $z-avatar-default - $i;
        }
        .#{$module}-item-end-#{$i} {
            z-index: $z-avatar-default - 20 + $i;
        }
    }

    .#{$module}-item-more {
        background-color: $color-avatar_more_default-bg-default;
    }
}

@each $c in $colors {
    .#{$module}-#{$c} {
        @include avatar-style($c);
    }
}

@import './rtl.scss';