@import 'common/style/variable.scss';
@import 'common/style/mixin.scss';

.user-details {
    .user-info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 40px 30px;
        .avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
        }
        .name {
            margin-left: 20px;
            color: $color-theme;
            font-size: $font-size-large;
        }
    }

    .list-content {
        max-height: 240px;
        overflow: hidden;
        .item {
            display: flex;
            align-items: center;
            height: 40px;
            padding: 0 14px 0 10px;
            overflow: hidden;
            &.list-enter-active,
            &.list-leave-active {
                transition: all 0.1s;
            }
            &.list-enter,
            &.list-leave-to {
                height: 0;
            }
            .current {
                flex: 0 0 20px;
                width: 20px;
                font-size: $font-size-small;
                color: $color-theme-d;
            }
            .text {
                flex: 1;
                @include no-wrap();
                font-size: $font-size-medium;
                color: $color-text-d;
            }
            .like {
                @include extend-click();
                margin-right: 15px;
                font-size: $font-size-small;
                color: $color-theme;
                .icon-favorite {
                    color: $color-sub-theme;
                }
            }
            .delete {
                @include extend-click();
                font-size: $font-size-small;
                color: $color-theme;
            }
        }
    }
}
