@import '../../Styles/abstracts/_media-queries.scss';
@import '../../Styles/abstracts/_bit-css-variables.scss';

main {
    width: 100%;
    min-height: 100%;

    @include lt-md {
        height: unset;
        min-height: $bit-env-height-available;
    }

    .main-container {
        display: flex;
    }

    .main-body {
        display: flex;
        width: calc(100% - 280px);

        @include lt-md {
            width: 100%;
        }
    }

    &.identity {
        .main-container {
            width: 100%;
            height: 100%;
            flex-direction: column;
        }

        .main-body {
            width: auto;
            flex-grow: 1;
            flex-direction: row;
        }

        .body {
            width: 30%;
            padding: 4rem;
            min-width: 35rem;
            padding-top: 5rem;
            background-color: $bit-color-background-secondary;
            border-inline-end: 1px solid $bit-color-border-secondary;

            @include lt-md {
                width: 100%;
                border: none;
                min-width: unset;
                padding-inline: 1rem;
                background-color: $bit-color-background-primary;
            }
        }

        .panel {
            width: 70%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;

            @include lt-md {
                display: none;
            }
        }
    }

    &.non-identity {
        .main-container {
            width: auto;
            height: auto;
            flex-direction: row;
        }

        .main-body {
            flex-grow: 1;
            flex-direction: column;

            @include lt-md {
                gap: 1rem;
            }

            @include lt-sm {
                gap: 0;
            }
        }

        .body {
            width: 100%;
            height: 100%;
            padding: 1rem;
            background-color: $bit-color-background-primary;

            @include lt-md {
                height: unset;
                padding-bottom: 4.5rem;
            }
        }
    }
}

::deep {
    .validation-message {
        font-size: 12px;
        text-align: start;
        line-height: 16px;
        color: $bit-color-error;
    }

    .nav-panel {
        width: 280px;

        @include lt-md {
            width: 210px;
        }
    }

    .footer-stack {
        position: relative;
    }

    .app-version {
        position: absolute;
        inset-block-end: 0;
        inset-inline-end: 0;
    }
}
