/*
 * Users barrel.
 */

@use "sass:math";

// todo : try to merge all user-avatar styles here
.user-avatar {
    border-radius: 50%;

    // for .fa when no picture
    display: flex;
    align-items: center;
    justify-content: center;
    color: $toolbar-bg;


    // make avatar always look as a square
    &:after {
        content: "";
        display: block;
        padding-bottom: 100%;
    }

    &.user-avatar-sm {
        // for picture
        max-width: 50px;
        max-height: 50px;

        // for .fa when no picture
        font-size: 50px;
    }

    &.user-avatar-md {
        // for picture
        max-width: 70px;
        max-height: 70px;

        // for .fa when no picture
        font-size: 70px;
    }

    &.user-avatar-lg {
        // for picture
        max-width: 200px;
        max-height: 200px;

        // for .fa when no picture
        font-size: 90px;
    }
}

.user-micro {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    vertical-align: middle;
    font-size: $font-size-sm;
    font-weight: 400;
    white-space: nowrap;

    .user-avatar {
        margin-right: 10px;

        // for picture
        max-height: 50px;

        // for .fa when no picture
        font-size: 50px;
    }
}

.user-micro-list {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .dropdown-menu {
        .user-micro {
            display: flex !important;
            padding: $dropdown-item-padding-y $dropdown-item-padding-x;
        }
    }
}

.user-page {
    // make avatar looks bigger than standard page icons
    .page-icon {
        width: 200px;
        height: 200px;
        margin-top: $grid-gutter-width*.5;
        margin-bottom: map-get($spacers, 5) * -1;
    }

    .page-header {
        margin-bottom: map-get($spacers, 5);
    }
}
