@use '~@/style/globals';

.MinimalistLayout {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;

    &__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    &__footer {
        flex: none;
        display: none;
        width: 100%;
        padding: 10px 15px;
        background-color: globals.$bg-color-emphasis;
        color: globals.$text-muted-color;
        font-size: 0.8rem;
        line-height: 1.52rem;
        text-align: center;
    }

    //
    // - Corps de la page
    //

    &__logo {
        position: relative;
        flex: 0 0 auto;
        padding: 30px 20px;
        text-align: center;

        .Logo {
            max-width: 100%;
            max-height: 80px;
        }
    }

    &__content {
        flex: 0 0 auto;
    }

    //
    // - Reponsive
    //

    @media (min-width: globals.$screen-mobile) {
        &__logo {
            .Logo {
                max-height: 120px;
            }
        }
    }

    @media (min-width: globals.$screen-tablet) {
        &__logo {
            .Logo {
                max-height: 150px;
            }
        }

        &__footer {
            display: block;
        }
    }
}
