Connected.Components/Styles/layout/_main.scss

@import '../abstracts/variables';

.main-content {
    margin: 0;
    flex: 1 1 auto;
    padding-top: calc(var(--appbar-height) - var(--appbar-height) / 8);
    transition: margin 225ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
}

@media (min-width:$breakpoint-xs) and (orientation: landscape) {
    .main-content {
        padding-top: calc(var(--appbar-height) - var(--appbar-height) / 4);
    }
}

@media (min-width:$breakpoint-sm) {
    .main-content {
        padding-top: var(--appbar-height);
    }
}

.appbar-dense {
    ~ .main-content {
        padding-top: calc(var(--appbar-height) - var(--appbar-height) / 4);
    }
}

.drawer-open {
    &-responsive {
        @each $breakpoint in map-keys($breakpoints) {
            &-#{$breakpoint} {
                @media (min-width: map-get($breakpoints, $breakpoint)) {
                    &-left .main-content {
                        margin-left: var(--drawer-width-left);
                    }

                    &-right .main-content {
                        margin-right: var(--drawer-width-right);
                    }

                    &-left#{&}-right .main-content {
                        margin-right: var(--drawer-width-right);
                        margin-left: var(--drawer-width-left);
                    }
                }
            }
        }
    }

    &-persistent {
        &-left:not(&-right) .main-content {
            margin-left: var(--drawer-width-left);
        }

        &-right:not(&-left) .main-content {
            margin-right: var(--drawer-width-right);
        }

        &-left#{&}-right .main-content {
            margin-right: var(--drawer-width-right);
            margin-left: var(--drawer-width-left);
        }
    }

    &-mini {
        @each $breakpoint in map-keys($breakpoints) {
            &-#{$breakpoint} {
                @media (min-width: map-get($breakpoints, $breakpoint)) {
                    &-left .main-content {
                        margin-left: var(--drawer-width-left);
                    }

                    &-right .main-content {
                        margin-right: var(--drawer-width-right);
                    }

                    &-left#{&}-right .main-content {
                        margin-right: var(--drawer-width-right);
                        margin-left: var(--drawer-width-left);
                    }
                }
            }
        }

        &-none, &-always {
            &-left .main-content {
                margin-left: var(--drawer-width-left);
            }

            &-right .main-content {
                margin-right: var(--drawer-width-right);
            }

            &-left#{&}-right .main-content {
                margin-right: var(--drawer-width-right);
                margin-left: var(--drawer-width-left);
            }
        }
    }
}

.drawer-close {
    &-mini {
        @each $breakpoint in map-keys($breakpoints) {
            &-#{$breakpoint} {
                &-left .main-content {
                    margin-left: var(--drawer-width-mini-left);
                }

                &-right .main-content {
                    margin-right: var(--drawer-width-mini-right);
                }

                &-left#{&}-right .main-content {
                    margin-right: var(--drawer-width-mini-right);
                    margin-left: var(--drawer-width-mini-left);
                }
            }
        }

        &-none, &-always {
            &-left .main-content {
                margin-left: var(--drawer-width-mini-left);
            }

            &-right .main-content {
                margin-right: var(--drawer-width-mini-right);
            }

            &-left#{&}-right .main-content {
                margin-right: var(--drawer-width-mini-right);
                margin-left: var(--drawer-width-mini-left);
            }
        }
    }
}