.admin-login-screens {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 50rem;
    height: 30rem;
    overflow: hidden;
}

.admin-login-screens > * {
    position: absolute;
    width: 100%;
    height: 100%;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    transition: margin 0.25s ease-in;
}

[data-role~=admin-screen-container] [data-screen-id=email] {
    margin-inline-start: 0;
}

[data-role~=admin-screen-container] [data-screen-id=button] {
    margin-inline-start: 100%;
}

[data-role~=admin-screen-container] [data-screen-id=loading] {
    margin-inline-start: 200%;
}

[data-role~=admin-screen-container].show-button [data-screen-id=email] {
    margin-inline-start: -100%;
}

[data-role~=admin-screen-container].show-button [data-screen-id=button] {
    margin-inline-start: 0;
}

[data-role~=admin-screen-container].show-button [data-screen-id=loading] {
    margin-inline-start: 100%;
}

[data-role~=admin-screen-container].show-loading [data-screen-id=email] {
    margin-inline-start: -200%;
}

[data-role~=admin-screen-container].show-loading [data-screen-id=button] {
    margin-inline-start: -100%;
}

[data-role~=admin-screen-container].show-loading [data-screen-id=loading] {
    margin-inline-start: 0;
}

/*show-button*/
.admin-form.login {
    padding: 2rem 4rem;
    min-height: 30rem;
}

.dot-floating-container {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 auto;
    width: 20rem;
}

.show-dots button {
    opacity: 0;
    cursor: default;
}

.show-dots .dot-floating-container {
    opacity: 1;
}

.dot-floating {
    position: relative;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-brand-light-blue);
    color: var(--color-brand-light-blue);
    animation: dotFloating 3s infinite cubic-bezier(0.15, 0.6, 0.9, 0.1);
}

.dot-floating::before, .dot-floating::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-floating::before {
    left: -12px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-brand-light-blue);
    color: var(--color-brand-light-blue);
    animation: dotFloatingBefore 3s infinite ease-in-out;
}

.dot-floating::after {
    left: -24px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: var(--color-brand-light-blue);
    color: var(--color-brand-light-blue);
    animation: dotFloatingAfter 3s infinite cubic-bezier(0.4, 0, 1, 1);
}

@keyframes dotFloating {
    0% {
        left: calc(-50% - 5px);
    }
    75% {
        left: calc(50% + 105px);
    }
    100% {
        left: calc(50% + 105px);
    }
}

@keyframes dotFloatingBefore {
    0% {
        left: -50px;
    }
    50% {
        left: -12px;
    }
    75% {
        left: -50px;
    }
    100% {
        left: -50px;
    }
}

@keyframes dotFloatingAfter {
    0% {
        left: -100px;
    }
    50% {
        left: -24px;
    }
    75% {
        left: -100px;
    }
    100% {
        left: -100px;
    }
}

.admin-form.login {
    max-width: 40rem;
    margin-block-start: 10rem;
    display: grid;
    gap: 3rem;
}

.admin-form.login h1 {
    text-align: center;
    margin: 0;
}

.admin-form.login .field input[type=email],
.admin-form.login .field input[type=password] {
    padding: 0 1rem;
}

.admin-form.login .field {
}

.admin-form.login button {
    width: 100%;
}