@import "../_base.scss";
@import "../components/_panel.scss";

.login-view {
    $panel-max-height: 1024px;

    height: 100%;
    width: 100%;

    position: relative;
    top: -100vh;

    margin-bottom: -100vh;

    display: flex;
    flex-direction: row;
    justify-content: safe center;
    align-items: safe center;

    &__login-panel {
        @media (max-aspect-ratio: $aspect-ratio) {
            width: 95%;
        }
        @media (min-aspect-ratio: $aspect-ratio) {
            height: 100%;
        }

        aspect-ratio: $aspect-ratio;
        max-height: $panel-max-height;

        flex-shrink: 0;
        scroll-snap-align: center;

        display: flex;
        align-items: center;
        justify-content: center;

        // Variables inherited by children
        --aspect-ratio: #{$aspect-ratio};
    }
}