.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-thick-shadow);
        }
        @mixin light {
            box-shadow: var(--light-thick-shadow);
        }
    }
}

.mobile-padding-height {
    height: 100vh;
}

.container-full-height {
    min-height: calc(100vh - (var(--mantine-spacing-md) * 2));
}

.container-full-height-fixed {
    height: calc(100vh - (var(--mantine-spacing-md) * 2));
}

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

.container-full-screen-mobile {
    @media (max-width: 48em) {
        min-height: 100vh;
        height: 100vh;
        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;
    }
}
