@import "../../../bricks/component/menu/menu";
@import "../../../bricks/component/panel/panel";
@import "../../../bricks/component/form/form";

.ub-member-avatar {
    .preview {
        .avatar-big {
            display: inline-block;
            vertical-align: bottom;

            img {
                width: 10rem;
                height: 10rem;
                border-radius: 0.25rem;
            }
        }

        .avatar-small {
            display: inline-block;
            vertical-align: bottom;

            img {
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 0.15rem;
            }
        }

        .avatar-small-round {
            display: inline-block;
            vertical-align: bottom;

            img {
                width: 2.5rem;
                height: 2.5rem;
                border-radius: 0.15rem;
            }
        }
    }

    .edit {
        padding-top: 0.5rem;
    }
}

.ub-member-home-header {
    padding: 0;
    margin: 0;

    .body {
        padding: 2rem 0;
        background: linear-gradient(var(--color-primary), var(--color-primary-dark));
        position: relative;

        .logout {
            position: absolute;
            right: 0.5rem;
            top: 0.5rem;
            color: #FFF;
        }

        .avatar {
            text-align: center;
            display: block;

            img {
                background: #EEE;
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                border: 0.1rem solid #FFF;
                border-color: rgba(255, 255, 255, 0.5);
            }
        }

        .user {
            .name {
                text-align: center;
                color: #FFF;
                padding-top: 0.5rem;
            }

            .vip {
                text-align: center;
                padding-top: 0.5rem;

                .link {
                    padding: 0 0.25rem;
                    border-radius: 0.5rem;
                    line-height: 1rem;
                    display: inline-block;
                }
            }
        }
    }
}

.ub-member-home-header-a {
    background: #FFF;

    .body {
        padding: 1rem var(--size-margin);
        display: flex;

        .avatar {
            margin-right: 0.5rem;

            .img {
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
            }
        }

        .user {
            flex: 1;

            .name {
                color: #111;
                font-size: 0.715rem;
                display: block;
                margin-top: 0.3rem;
            }

            .labels {
                display: block;
                padding-top: 0.3rem;

                .label {
                    background: #EEE;
                    color: var(--color-primary);
                    line-height: 1rem;
                    display: inline-block;
                    padding: 0 0.5rem;
                    border-radius: 0.5rem;
                    font-size: var(--font-size-small);
                }
            }
        }

        .profile {
            .arraw {
                font-size: var(--font-size-large);
                color: #c4cfdb;
                margin-top: 0.5rem;
                display: inline-block;
            }
        }
    }
}

.ub-member-vip-info {
    background: #F7E9D9;
    border-radius: var(--size-radius);
    padding: var(--size-margin);

    .icon {
        float: left;
        width: 1.4rem;
        margin-right: 0.5rem;
        margin-top: 0.3rem;

        .img {
            width: 1.4rem;
            height: 1.4rem;
        }
    }

    .action {
        float: right;

        .btn {
            border-radius: 1rem;
            margin-top: 0.3rem;
            background: #EED8AE;
            color: #6D4E2B;
        }
    }

    .title {
        font-weight: bold;
        color: #685127;
        font-size: 0.715rem;
    }

    .desc {
        color: #BC9E73;
    }
}
