.avatar-info {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;

    .avatar-wrapper {
        display: flex;
        align-items: center;
    }

    .info-wrapper {
        margin-left: 0.75rem;

        h4 {
            font-size: $avatar-info-title-size;
            margin-bottom: 0;
        }

        p {
            font-size: $avatar-info-subtitle-size;
            font-weight: $avatar-info-subtitle-weight;
            margin-bottom: 0;

            a {
                color: $avatar-info-subtitle-action;
            }
        }
    }

    .avatar-actions-wrapper {
        position: relative;

        .avatar-actions-toggle {
            display: block;
            color: $grey;
            margin-left: 0.5rem;
            margin-top: 0.125rem;

            &:hover {
                color: $dark-grey;
            }
        }

        .avatar-actions-container {
            position: absolute;
            min-width: 120px;
            right: 0;
            background: $white;
            border-radius: $border-radius;
            box-shadow: $box-shadow;
            margin-top: 1rem;

            .avatar-actions {
                padding:1rem;
                display: flex;
                flex-direction: column;
                white-space: nowrap;
                a {
                    margin-bottom: .5rem;
                    color: $body-text;
                    font-weight: 500;

                    &:hover {
                        color: $brand-primary;
                    }

                    &:last-child {
                        margin-bottom: 0;
                    }
                }
            }
        }
    }
}