*, *:before, *:after {
    background-repeat:no-repeat;
    background-position:center;
    box-sizing: border-box;
    position:relative;
}

.login {
    display: grid;
    height: 100%;
    place-content: center;
    place-items: center;
    padding-bottom: 20px;
    width: 100%
}

.login__wrap {
    background-color: var(--colour-bg-default);
    border: .5px solid var(--colour-border-muted);
    border-radius: var(--radius-16);
    box-shadow: var(--shadow-extra-large);
    display: grid;
    gap: var(--size-10);
    grid-column: span 2;
    grid-template-columns: repeat(2,minmax(0,1fr));
    height: 100vw;
    max-height: 26rem;
    max-width: 30rem;
    padding: var(--size-28);
    place-items: center;
    width: 100vw;
    position:relative;
}

.login__logo {
    grid-column: span 2;
    background-image: var(--appLogo);
    background-position: center;
    background-repeat: no-repeat;
    width: 10rem;
    height: 2rem;
}

.login__title {
    color: var(--colour-fg-default);
    font: 500 var(--font-24);
    grid-column: span 2;
}

.login__input {
    appearance:none;
    font: 500 var(--font-14);
    grid-column: span 2;
    height: var(--size-40);
    border: 1px solid var(--colour-border-default);
    padding: 0 var(--size-12);
    width: 100%;
    border-radius: var(--size-8);
}

.login__button:disabled {
    background-color: var(--colour-bg-muted);
    cursor: not-allowed
}

.login__input__small {
    appearance: none;
    font: 500 var(--font-10);
    grid-column: span 2;
    height: var(--size-20);
    border: 1px solid var(--colour-border-default);
    padding: 0 var(--size-8);
    width: 100%;
    border-radius: var(--size-8);
}

.login__button {
    background-color: var(--colour-accent-fg);
    border: none;
    border-radius: var(--size-8);
    color: var(--colour-fg-on-emphasis);
    cursor: pointer;
    font: 500 var(--font-14);
    grid-column: span 2;
    height: var(--size-40);
    padding: 0 var(--size-12);
    width: 100%
}

.login__meta {
    color: var(--colour-fg-subtle);
    font: 500 var(--font-12);
    margin-right: auto
}

    .login__meta + .login__meta {
        margin: 0 0 0 auto
    }

.login__link {
    color: var(--colour-accent-fg)
}

.login__version {
    color: var(--colour-fg-subtle);
    font: 500 var(--font-12);
    grid-column: span 2
}

.login__error {
    background-color: var(--colour-danger-subtle);
    border-radius: var(--radius-8);
    color: var(--colour-danger-fg);
    font: 500 var(--font-12);
    inset: auto var(--size-12) var(--size-12);
    padding: var(--size-8) var(--size-16);
    position: absolute
}

.login__subtitle {
    font: 700 var(--font-16)
}

.login__close {
    background-color: var(--colour-danger-muted);
    border-radius: 50%;
    height: var(--size-20);
    inset: var(--size-8) var(--size-8) auto auto;
    position: absolute;
    width: var(--size-20)
}

    .login__close:before, .login__close:after {
        background-color: var(--colour-danger-fg);
        border-radius: var(--radius-r);
        content: "";
        height: var(--size-10);
        inset: 50%;
        position: absolute;
        width: var(--size-2)
    }

    .login__close:before {
        transform: translate(-50%,-50%) rotate(45deg)
    }

    .login__close:after {
        transform: translate(-50%,-50%) rotate(-45deg)
    }

.login__group {
    width: 100%;
    place-items: center;
    grid-column: span 2;
}

.login__error__close {
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    position: absolute;
    right: 8px;
    top: 8px;
    padding-left: 5px;
}