@import url("../_base.css");
@import url("../_components.css");
@import url("../_loading.css");
@import url("../_variables.css");
@import url("../_utlilti.css");
@import url("../_icons.css");

body.interim-login {
    height: auto;
}

.login {
    background: url("../../images/login_background.svg") no-repeat center/cover
        var(--bg);
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}
.login.blackbird-theme-dark {
    background: url("../../images/login_background_dark.svg") no-repeat
        center/cover var(--bg);
}
.login .title {
    font-weight: 500;
    color: var(--t-1);
    margin-bottom: 0.5rem;
}
.login .text {
    margin: 0;
    color: var(--t-2);
}
.login #login {
    border-radius: 1rem;
    filter: drop-shadow(rgba(0, 0, 0, 0) 0px 0px 0px)
        drop-shadow(rgba(0, 0, 0, 0.05) 0px 20px 20px);
}
.login .inner-login {
    background-color: var(--login-bg);
    border: 1px solid var(--login-border);
    width: 404px;
    flex: 0 0 auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 2rem;
    border-radius: 1rem;
    position: relative;
}
.login .message,
.login .notice,
.login .success {
    background-color: var(--white);
    color: var(--t-1);
    padding: 0.857rem 0.857rem 0.857rem 1.857rem;
    position: relative;
    border: 1px solid transparent;
    border-radius: 0.286rem;
    margin-top: 1rem;
    font-size: 0.9rem;
    width: 100%;
}
.login .notice:before,
.login .message:before,
.login .success:before {
    content: "";
    position: absolute;
    left: 0.857rem;
    top: 0.857rem;
    bottom: 0.857rem;
    width: 0.286rem;
    border-radius: 0.357rem;
}
.login .notice-success {
    background-color: color-mix(in srgb, var(--green-6) 5%, transparent);
    border-color: color-mix(in srgb, var(--green-6) 25%, transparent);
    box-shadow: 0 3px 10px 3px
        color-mix(in srgb, var(--green-6) 8%, transparent);
}
.login .notice-success:before {
    background-color: var(--green-6);
}
.login .notice-error {
    background-color: color-mix(in srgb, var(--red-6) 5%, transparent);
    border-color: color-mix(in srgb, var(--red-6) 25%, transparent);
    box-shadow: 0 3px 10px 3px color-mix(in srgb, var(--red-6) 8%, transparent);
}
.login .notice-error:before {
    background-color: var(--red-6);
}
.login .notice-info {
    background-color: color-mix(in srgb, var(--blue-6) 5%, transparent);
    border-color: color-mix(in srgb, var(--blue-6) 25%, transparent);
    box-shadow: 0 3px 10px 3px color-mix(in srgb, var(--blue-6) 8%, transparent);
}
.login .notice-info:before {
    background-color: var(--blue-6);
}

.login .login-error-list {
    list-style: none;
}
.login .login-error-list li + li {
    margin-top: 4px;
}
#loginform p.submit,
.login-action-lostpassword p.submit {
    border: none;
    margin: -10px 0 20px; /* May want to revisit this */
}
.login .input::-ms-clear {
    display: none;
}
.login .pw-weak {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.login .button.wp-hide-pw {
    color: var(--neutral-3);
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
    font-size: 14px;
    line-height: 36px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}
.login .button.wp-hide-pw:hover {
    background: transparent;
}
.login .button.wp-hide-pw:focus {
    outline: none;
}
.user-pass-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.wp-login-lost-password {
    font-size: 0.9rem;
    color: var(--t-1);
    text-decoration: none;
}
.wp-login-lost-password:hover,
.wp-login-lost-password:focus {
    color: var(--t-1-hover);
    text-decoration: underline;
    margin-bottom: 7px;
}
.login .button.wp-hide-pw:active {
    background: transparent;
    box-shadow: none;
    transform: none;
}
.login .button.wp-hide-pw .dashicons {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}
.user-pass-wrap .wp-pwd {
    position: relative;
    width: 100%;
}
.login .button.wp-hide-pw .dashicons.dashicons-visibility:before {
    content: "\ecb3";
}
.login .button.wp-hide-pw .dashicons.dashicons-hidden:before {
    content: "\ecb5";
}
.no-js .hide-if-no-js {
    display: none;
}
.login form {
    margin-top: 1.5rem;
    width: 100%;
}
.login form.shake {
    animation: shake 0.2s cubic-bezier(0.19, 0.49, 0.38, 0.79) both;
    animation-iteration-count: 3;
    transform: translateX(0);
}
.login-action-confirm_admin_email #login {
    width: 60vw;
    max-width: 650px;
    margin-top: -2vh;
}

.login form .forgetmenot {
    font-weight: 400;
    float: left;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.login .button-primary {
    background-color: var(--primary-color);
    color: var(--p-text);
    min-height: 2.571rem;
    min-width: 8.571rem;
    padding: 0 1.2rem;
    border-radius: 0.571rem;
    border: 0.5px solid var(--primary-7);
    cursor: pointer;
    transition: all 220ms ease;
    box-shadow:
        inset 0 -3px 0px var(--primary-7),
        inset 0 2px 10px var(--primary-5);
}
.login .button-primary:hover {
    background-color: var(--primary-7);
    box-shadow:
        inset 0 -3px 0px var(--primary-8),
        inset 0 2px 10px var(--primary-5);
}
.login .button-primary:focus-visible {
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--primary-7) 25%, transparent),
        0 0 0 3px color-mix(in srgb, var(--primary-10) 25%, transparent);
}
.login .button-primary:active,
.login .button-primary:focus {
    background-color: var(--primary-7);
    box-shadow: none;
}
.login .reset-pass-submit .button {
    display: inline-block;
    float: none;
    margin-bottom: 6px;
}
.login .reset-pass-submit .wp-generate-pw {
    background-color: var(--white);
    color: var(--neutral-6);
    min-height: 2.571rem;
    min-width: 8.571rem;
    padding: 0 0.857rem;
    border-radius: 0.571rem;
    border: 0.5px solid var(--white-600);
    cursor: pointer;
    transition: all 220ms ease;
    box-shadow:
        0px 2px 4px 0px color-mix(in srgb, var(--black) 4%, transparent),
        0px 2px 4px -2px color-mix(in srgb, var(--black) 20%, transparent);
}
.login .reset-pass-submit .wp-generate-pw:hover {
    color: var(--black-400);
    background-color: var(--white-900);
}
.login .reset-pass-submit .wp-generate-pw:focus-visible {
    box-shadow:
        0 8px 20px color-mix(in srgb, var(--neutral-7) 15%, transparent),
        0 0 0 3px color-mix(in srgb, var(--neutral-10) 15%, transparent);
}
.login .reset-pass-submit .wp-generate-pw:active {
    transform: translateY(0);
    filter: brightness(0.98);
}
.login .admin-email-confirm-form .submit {
    text-align: center;
}
.admin-email__later {
    text-align: left;
}
.login form p.admin-email__details {
    margin: 1.1em 0;
}
.login .admin-email__heading {
    border-bottom: 1px var(--neutral-1) solid;
    color: var(--neutral-5);
    font-weight: normal;
    padding-bottom: 0.5em;
    text-align: left;
}
.admin-email__actions div {
    padding-top: 1.5em;
}
.login .admin-email__actions .button-primary {
    float: none;
    margin-left: 0.25em;
    margin-right: 0.25em;
}
#login form p {
    margin-bottom: 0;
}
#login form .indicator-hint,
#login #reg_passmail {
    margin-bottom: 16px;
    background-color: color-mix(in srgb, var(--primary-color) 5%, transparent);
    color: var(--primary-5);
    padding: 1rem;
    border-radius: 0.5rem;
    border: 1px solid color-mix(in srgb, var(--primary-color) 15%, transparent);
}
#login form p.submit {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wp-login-log-in {
    color: var(--t-1);
    text-decoration: none;
    font-size: 0.9rem;
}
.wp-login-log-in:hover,
.wp-login-log-in:active {
    text-decoration: underline;
    color: var(--t-1-hover);
}
.login label {
    font-size: 0.9rem;
    line-height: 1.5;
    display: inline-block;
    margin-bottom: 3px;
    color: var(--neutral-4);
}
.login .forgetmenot label,
.login .pw-weak label {
    line-height: 1.5;
    vertical-align: baseline;
    margin-bottom: 0;
    cursor: pointer;
}
.login .wp-login-logo {
    text-align: center;
    margin-bottom: 24px;
}
.login .wp-login-logo img {
    max-width: 48px;
}
.login form .submit.reset-pass-submit {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    margin-bottom: 1rem !important;
}
#backtoblog {
    background-color: var(--login-back-bg);
    border: 1px solid var(--login-back-border);
    border-radius: 0 0 1rem 1rem;
    display: flex;
    width: 100%;
    word-wrap: break-word;
    height: 4.143rem;
    line-height: 100%;
    justify-content: center;
    align-items: center;
    margin-top: -11px;
    padding-top: 11px;
    font-size: 0.9rem;
}
.login #nav a,
.login #backtoblog a {
    text-decoration: none;
    color: var(--t-1);
}
.login #nav a:hover,
.login #backtoblog a:hover,
.login h1 a:hover {
    color: var(--t-1-hover);
    text-decoration: underline;
}
.login #nav a:focus,
.login #backtoblog a:focus,
.login h1 a:focus {
    color: var(--t-1-hover);
}
.login .privacy-policy-page-link {
    text-align: center;
    width: 100%;
    margin: 3em 0 2em;
}
.login input.password-input {
    font-family: Consolas, Monaco, monospace;
}
.js.login input.password-input {
    padding-right: 2.5rem;
}
.js.login-action-resetpass input[type="text"],
.js.login-action-resetpass input[type="password"],
.js.login-action-rp input[type="text"],
.js.login-action-rp input[type="password"] {
    margin-bottom: 0;
}
.wp-pwd {
    position: relative;
}
.wp-pwd #pass-strength-result {
    margin: 0.5rem 0 1rem;
    position: relative;
    padding-top: 0.5rem;
    text-align: right;
    font-size: 0.8rem;
    font-weight: 600;
}
.wp-pwd #pass-strength-result::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    width: 0%;
    height: 4px;
    background-color: var(--neutral-1);
    border-radius: 4px;
    transition: all 300ms ease;
}
.wp-pwd #pass-strength-result.empty {
    padding: 0;
    margin: 0;
}
.wp-pwd #pass-strength-result.short {
    color: var(--neutral-2);
}
.wp-pwd #pass-strength-result.short::before {
    background-color: var(--neutral-2);
    width: 25%;
}
.wp-pwd #pass-strength-result.bad {
    color: var(--red-6);
}
.wp-pwd #pass-strength-result.bad::before {
    background-color: var(--red-6);
    width: 50%;
}
.wp-pwd #pass-strength-result.good {
    color: var(--yellow-6);
}
.wp-pwd #pass-strength-result.good::before {
    background-color: var(--yellow-6);
    width: 75%;
}
.wp-pwd #pass-strength-result.strong {
    color: var(--green-6);
}
.wp-pwd #pass-strength-result.strong::before {
    background-color: var(--green-6);
    width: 100%;
}
.interim-login #login {
    padding: 0;
    margin: 5px auto 20px;
}
.interim-login.login h1 a {
    width: auto;
}
.interim-login #login_error,
.interim-login.login .message {
    margin: 0 0 16px;
}
.interim-login.login form {
    margin: 0;
}
.screen-reader-text,
.screen-reader-text span {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important; /* many screen reader and browser combinations announce broken words as they would appear visually */
}
input::-ms-reveal {
    display: none;
}
#language-switcher {
    padding: 0;
    overflow: visible;
    background: none;
    border: none;
    box-shadow: none;
}
#language-switcher select {
    margin-right: 0.25em;
}
.language-switcher {
    margin: 0 auto;
    padding: 0 0 24px;
    text-align: center;
    display: none;
}
.language-switcher label {
    margin-right: 0.25em;
}
.language-switcher label .dashicons {
    width: auto;
    height: auto;
}
.login .language-switcher .button {
    margin-bottom: 0;
}
.blackbird-login-logo svg {
    width: 48px;
    height: auto;
    color: var(--primary-color);
}
.blackbird-login-logo svg path {
    fill: currentColor;
}

/* ------- */

@keyframes shake {
    25% {
        transform: translateX(-20px);
    }
    75% {
        transform: translateX(20px);
    }
    100% {
        transform: translateX(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .login form.shake {
        animation: none;
        transform: none;
    }
}

@media screen and (max-width: 782px) {
    .login-action-confirm_admin_email #login {
        box-sizing: border-box;
        margin-top: 0;
        padding-left: 4vw;
        padding-right: 4vw;
        width: 100vw;
    }
}