.op3-element[data-op3-element-type="loginandsignupform"] {
    .op3-element-form__children {
        &:not([data-op3-login-and-signup-form-state="login"]) .op3-element[data-op3-element-spec^="login"],
        &:not([data-op3-login-and-signup-form-state="signup"]) .op3-element[data-op3-element-spec^="signup"],
        &:not([data-op3-login-and-signup-form-state="reset"]) .op3-element[data-op3-element-spec^="reset"],
        &:not([data-op3-login-and-signup-form-state="postreset"]) .op3-element[data-op3-element-spec^="postreset"],
        &:not([data-op3-login-and-signup-form-state="loggedin"]) .op3-element[data-op3-element-spec^="loggedin"] {
            display: none !important;
        }
    }
}

html:not([data-op3-layer]) body.logged-in .op3-element[data-op3-element-type="loginandsignupform"] {
    &[data-op3-login-and-signup-form-hide-when-logged-in="1"] {
        display: none;
    }

    .op3-element-form__children .op3-element {
        &[data-op3-element-spec^="login"],
        &[data-op3-element-spec^="signup"],
        &[data-op3-element-spec^="reset"],
        &[data-op3-element-spec^="postreset"] {
            display: none !important;
        }

        &[data-op3-element-spec^="loggedin"] {
            display: block !important;
        }
    }
}

// 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="loginandsignupform"] {
    width: 640px;

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