.pso-d-avatar {}

.pso-d-avatar__inner {
    display: flex;
    gap: var(--G4);
}

.pso-d-avatar__editor {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--G3);
    align-items: stretch;
    width: 50%;

    .pso-d-avatar__title {
        margin-bottom: var(--G1);
        font-size: 80%;
        font-weight: 600;
        text-align: center;
        color: var(--PS-COLOR--TEXT--LIGHT);
    }

    @include mq($until: desktop) {
        .pso-btn {
            span {
                display: none;
            }
        }
    }
}

.pso-d-avatar__actions {
    display: flex;
    gap: var(--G3);
    flex-wrap: wrap;

    > a {
        flex-grow: 1;

        .pso-i-circle-user {
            + span {
                display: block;
            }
        }
    }
}

.pso-d-avatar__view {
    > img {
        width: 100%;
        border-radius: var(--BORDER-RADIUS);
    }
}

.pso-d-avatar__edit {
    display: flex;
    justify-content: space-between;
}

.pso-d-avatar__preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--G3);
    width: 50%;
    padding: var(--PADD--MD);
    text-align: center;
    background-color: var(--PS-COLOR--APP--GRAY);
    border-radius: var(--BORDER-RADIUS--MD);

    .pso-d-avatar__title {
        font-weight: 500;
        font-size: var(--F);
        color: var(--PS-COLOR--TEXT);
    }
}

.pso-d-avatar__desc {
    font-size: var(--F-XS);
    font-weight: 500;
    color: var(--PS-COLOR--TEXT--LIGHT);

    p {
        margin: 0;
    }

    @include mq($from: desktop) {
        font-size: var(--F-S);
    }
}