.user-icon {
    border-radius: $user-icon-border-radius;
    background-color: $thumbnail-bg;
    padding: $thumbnail-padding;
    display: table;
    border: $thumbnail-border-width solid $thumbnail-border-color;
    overflow: hidden;
    position: relative;
    line-height: 1;

    &.left {
        position:absolute;
        left: $spacing-sm;
        top: $spacing-sm;
        display: block;
        z-index: 5;

        &.small-icon {
            width: 2.1875rem; // 35px;
            height: 2.1875rem; // 35px;
        }
    }

    .list-group-item & {
        float: left;
        margin-right: $spacing-base;

        a {
          display: inline-block;
        }
    }
    img {
        margin: 0;
        opacity: 0.9;
        position: relative;
        width: 1.25rem; // 20px;
        height: 1.25rem; // 20px;
        object-fit: cover;
        border-radius: $user-icon-border-radius;
    }
    p {
        margin-bottom: 0;
    }

    .page-header & {
      margin-top: -0.25rem; // -4px
      margin-right: $spacing-base;
      margin-bottom: 0;
      margin-left: 0;
    }

    .label & {
        display: inline-block;
    }

    // Gap between user icon and user name
    .user-icon-name & {
        margin-right: $spacing-base;
    }
}

.with-user-icon {
    padding-left: 3.3125rem; // 53px;
}

.card-header {
    a.has-user-icon , a.has-user-icon.collapsed {
        padding-left: 4.0625rem; // 65px; //make room for user image
    }
}

.card-body {
    .with-user-icon-lg {
        padding-right: 4.1875rem; // 67px;
    }
}

a.user-icon, a .user-icon {
    &:hover,
    &:focus {
        opacity:1;
        background-color: $thumbnail-bg;

        img {
            opacity: 1;
        }

        &:after {
            @include transition(opacity 0.5s);
            opacity:1;
            visibility: visible;
        }
    }
}

.item.user-icon img {
    margin-bottom: $spacing-sm;
}

// User icon sizes
.user-icon-20 {
    img {
        width: 1.25rem; // 20px;
        height: 1.25rem; // 20px;
    }
}
.user-icon-25 { // used in header
    img {
        width: 1.5625rem; // 25px;
        height: 1.5625rem; // 25px;
    }
}
.user-icon-30 {
    width: 1.875rem + ($thumbnail-border-width * 2) + ($thumbnail-padding * 2);
    height: 1.875rem + ($thumbnail-border-width * 2) + ($thumbnail-padding * 2);
    img {
        width: 1.875rem; // 30px;
        max-width: 1.875rem; // 30px;
        height: 1.875rem; // 30px;
    }
}
.user-icon-40 {
    width: 2.5rem + ($thumbnail-border-width * 2) + ($thumbnail-padding * 2);
    height: 2.5rem + ($thumbnail-border-width * 2) + ($thumbnail-padding * 2);
    img {
        width: 2.5rem; // 40px;
        max-width: 2.5rem; // 40px;
        height: 2.5rem; // 40px;
    }
}
.user-icon-50 {
    img {
        width: 3.125rem; // 50px;
        height: 3.125rem; // 50px;
    }
}
.user-icon-60 {
    img {
        width: 3.75rem; // 60px;
        height: 3.75rem; // 60px;
    }
}
.user-icon-100 {
    img {
        width: 6.25rem; // 100px;
        height: 6.25rem; // 100px;
    }
}
.user-icon-inline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.125rem; // 2px
}

// Profile pictures page user icons cell
.profileiconcell {
    img {
        width: 6.25rem; // 100px;
        height: 6.25rem; // 100px;
        object-fit: cover;
        border-radius: $user-icon-border-radius;
    }
}

// Thumbnail grid user icons spacing
.user-thumbnails {
    .user-icon {
        margin-right: $spacing-base;
        margin-bottom: $spacing-base;
        padding: 0.25rem; // 4px
        max-width: 6.875rem; // 110px
        border-radius: $thumbnail-border-radius;
        text-decoration: none;

        img {
            border-radius: $user-icon-border-radius;
        }

        .member-name {
          line-height: $line-height-base;
        }
    }
}

// Select-2 user list user icons
.select2-user-icon {
    width: 2.5rem; // 40px;
    height: 2.5rem; // 40px;
    object-fit: cover;
    border-radius: $user-icon-border-radius;
}
