@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

$_cds-avatar-border-radius: var(--cds-avatar-br) !default; //config.$config-global-border-radius !default;

//GROUPABLE
.cds-avatar-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;

    &>.cds-avatar:not(:first-of-type) {
        outline: 4px solid var(--cds-color-background-default);
        margin-left: -8px;
    }
}

.cds-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: $_cds-avatar-border-radius;

    // DEFAULT
    min-height: vars.$cds-size-250;
    min-width: vars.$cds-size-250;
    max-height: vars.$cds-size-250;
    max-width: vars.$cds-size-250;
    @include mixins.cds-accent;

    &__text {
        @include mixins.cds-paragraph-m;
    }

    &__icon::before {
        @include mixins.cds-icon-size(vars.$cds-icon-150);
    }

    &__image {
        background-size: cover;
        object-fit: cover;
        background-position: center;
        background-repeat: no-repeat;
        min-height: inherit;
            min-width: inherit;
            max-height: inherit;
            max-width: inherit;
    }

    //ALTERNATIVE MODIFIERS
    @for $i from 1 through 10 {
        &--color-#{$i} {
            border: 1px solid;
            @include mixins.cds-color-alternative(#{$i});
        }
    }

    //VARIANT MODIFIERS
    &--accent {
        @include mixins.cds-accent;
    }

    &--primary {
        @include mixins.cds-primary;
    }

    &--secondary {
        @include mixins.cds-secondary;
    }

    &--inverse {
        @include mixins.cds-inverse;
    }

    &--image {
        border: 0;
        overflow: hidden;
        background: transparent;
        //background-size: 110%;
    }

    //SIZE MODIFIERS
    &--tiny {
        min-height: vars.$cds-size-150;
        min-width: vars.$cds-size-150;
        max-height: vars.$cds-size-150;
        max-width: vars.$cds-size-150;

        .cds-avatar__text {
            @include mixins.cds-paragraph-s(bold);
        }

        & [class^="__icon"]::before,
        [class*="__icon "]::before {
            @include mixins.cds-icon-size(vars.$cds-icon-100);
        }
    }

    &--small {
        min-height: vars.$cds-size-200;
        min-width: vars.$cds-size-200;
        max-height: vars.$cds-size-200;
        max-width: vars.$cds-size-200;

        .cds-avatar__text {
            @include mixins.cds-paragraph-s(bold);
        }
    }

    &--medium {
        min-height: vars.$cds-size-250;
        min-width: vars.$cds-size-250;
        max-height: vars.$cds-size-250;
        max-width: vars.$cds-size-250;

        .cds-avatar__text {
            @include mixins.cds-paragraph-m;
        }
    }

    &--large {
        min-height: vars.$cds-size-350;
        min-width: vars.$cds-size-350;
        max-height: vars.$cds-size-350;
        max-width: vars.$cds-size-350;

        .cds-avatar__text {
            @include mixins.cds-paragraph-l;
        }

        & [class^="__icon"]::before,
        [class*="__icon "]::before {
            @include mixins.cds-icon-size(vars.$cds-icon-100);
        }
    }
}