.container {
    @mixin dark {
        background-color: var(--mantine-color-dark-8);
    }
    @mixin light {
        background-color: white;
    }

    @media (min-width: 48em) {
        padding: var(--mantine-spacing-md);

        @mixin dark {
            box-shadow: var(--dark-shadow);
        }
        @mixin light {
            box-shadow: var(--light-shadow);
        }
    }
}

.container-full-height {
    height: var(--page-height);

    @media (max-width: 48em) {
        height: var(--mobile-page-height);
    }
}

.container-no-border-radius {
    border-radius: 0 !important;
}

.container-full-screen-mobile {
    @media (max-width: 48em) {
        min-height: var(--mobile-page-height);
        height: var(--mobile-page-height);
        width: 100vw;
        border-radius: 0 !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 100;
        overflow-y: auto;
    }
}

.transparent {
    @media (min-width: 48em) {
        box-shadow: none !important;
        background-color: transparent !important;
    }
}
