.miniprofile {
    @extend .d-flex;

    flex-direction: column;
    gap: 30px;
    width: 100%;
    height: 100%;

    &__content,
    &__main {
        @extend .d-flex;

        flex-direction: column;
        gap: 15px;
        width: 100%;
        height: 100%;
    }

    &__user {
        @extend .flex-center;

        flex-direction: column;
        gap: 10px;

        &-content {
            @extend .flex-center;

            flex-direction: column;

            p {
                line-height: 1;
                color: var(--text-500);
            }
        }

        img {
            width: 90px;
            height: 90px;
            background-color: var(--transp-1);
            border-radius: 50%;
            object-fit: cover;
        }
    }

    &__content {
        &-buttons {
            @extend .d-flex;

            border-top: 1px solid var(--transp-1);
            padding-top: 10px;
            flex-direction: column;
            gap: 5px;
        }
    }

    &__button {
        @extend .align-center;

        gap: 10px;
        padding: 6px 10px;
        @include transition(all);
        border-radius: var(--border05);
        font-size: var(--small);
        color: var(--text-300);
        font-weight: 500;

        svg {
            font-size: var(--p);
        }

        &:hover {
            color: var(--text);
            background-color: var(--transp-1);
        }
    }

    &__container {}

    &__balance {
        @extend .flex-row, .flex-between;

        width: 100%;
        flex: 1;
        margin-top: 10px;
        border: 1px solid var(--transp-2);
        padding: .5rem 1rem;
        border-radius: var(--border05);

        &-content {
            margin-bottom: 3px;

            h6,
            small {
                line-height: 1.4;
            }

            small {
                color: var(--text-400);
            }
        }

        &-btn {}
    }
}