@use '../function' as *;

@mixin roolith-page() {
    .page {
        height: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .page-normal {
        height: auto;
        display: block;
    }

    .page-content {
        text-align: center;

        .page-normal & {
            padding: rem(60) 0 0;
            text-align: left;
        }
    }

    .page-icon {
        font-size: rem(72);
    }

    .page-header {
        padding: rem(10) 0 rem(20);
    }

    .page-body {
        font-size: rem(14);
        line-height: rem(22);
    }

    .page-footer {
        padding: rem(100) 0 0;
        @extend .small, .dimmed;
    }
}