.op3-element[data-op3-element-type="userprofileform"] {
    .op3-element-form__children {
        &:not([data-op3-user-profile-state="loggedin"]) .op3-element[data-op3-element-spec^="loggedin"],
        &:not([data-op3-user-profile-state="loggedout"]) .op3-element[data-op3-element-spec^="loggedout"] {
            display: none !important;
        }
    }
}

html:not([data-op3-layer]) body:not(.logged-in) .op3-element[data-op3-element-type="userprofileform"] {
    .op3-element-form__children {
        > .op3-element {
            display: none;
        }
        > .op3-element[data-op3-element-spec="userprofileloggedoutmessagehtml"] {
            display: block;
        }
    }
}

html:not([data-op3-layer]) body.logged-in .op3-element[data-op3-element-type="userprofileform"] {
    .op3-element-form__children {
        > .op3-element[data-op3-element-spec="userprofileloggedoutmessagehtml"] {
            display: none;
        }
    }
}

// This element is extended from form element, and all CSS is inherited from
// there. There is .op3-element[data-op3-element-type$="form"] selector in
// form's op3-element.scss. To override it we need stronger selector here.
.op3-element[data-op3-element-type][data-op3-element-type="userprofileform"] {
    width: 640px;

    .op3-element-form__container {
        padding: 32px;
    }

    .op3-element-input-edit-text {
        overflow-y: scroll;
    }
}

.op3-element[data-op3-element-spec="userprofileemptyloggedoutmessage"] {
    margin: 0;
    font-style: italic;
    text-align: center;
    color: #bbb;

    .op3-text-wrapper {
        padding: 2em;
    }
}