@use "./_variables.scss" as *;
@use "../../functions/index.scss" as *;
@use "../../border-radii/index.scss" as *;

@mixin kendo-avatar--layout-base() {

    // Avatar
    .k-avatar {
        border-width: 0;
        border-style: solid;
        box-sizing: border-box;
        vertical-align: middle;
        display: inline-flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        overflow: hidden;

        *,
        *::before,
        *::after {
            box-sizing: border-box;
        }

        // Roundness
        @each $roundness in $kendo-avatar-roundness {
            #{k-when-default($kendo-avatar-default-roundness, $roundness)}
            &.k-rounded-#{$roundness} {
                border-radius: k-border-radius($roundness);
            }
        }
        // Null by default, overrides default border-radius
        border-radius: $kendo-avatar-border-radius;

        // Sizes
        @each $name, $size in $kendo-avatar-sizes {
            #{k-when-default($kendo-avatar-default-size, $name)}
            &.k-avatar-#{$name} {
                width: $size;
                height: $size;
                flex-basis: $size;
            }
        }
    }


    // Avatar text
    .k-avatar-text,
    .k-avatar-initials {
        font-size: $kendo-avatar-font-size;
        font-family: $kendo-avatar-font-family;
        line-height: $kendo-avatar-line-height;
    }


    // Avatar icon
    .k-avatar-icon {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
    }


    // Avatar image
    .k-avatar-image {
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;

        > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            vertical-align: top;
        }
    }


    // Shapes
    .k-avatar-square {}

    // Bordered
    .k-avatar-bordered {
        border-width: $kendo-avatar-border-width;
    }


}