/*----------------------------------------------------------------*/
/*  Content
/*----------------------------------------------------------------*/

@import "angular-material-variables";
@import "variables";
@import "mixins";

$content-background: #ecf0f5;

// Opposite of "Loading/loading.scss"
#content-wrapper,
#content-wrapper-with-toolbar {
    display: flex;
}

#content {
    @include custom-scrollbar;
}

#view-container {
    position: relative;
    display: block;
    box-sizing: border-box;
    height: calc(100% - #{$toolbar-height});
}

// Google maps infowindow content
.gm-style-iw {
    > div {
        @include custom-scrollbar;
    }
}

// Content only
#content-wrapper {
    position: relative;
    max-height: 100%;
    height: 100%;

    #content {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

// Content with toolbar
#content-wrapper-with-toolbar {
    height: 100%;
    max-height: 100%;

    #content-container {
        position: relative;
        overflow: hidden;
        background-color: $content-background;
        height: inherit;

        #content {
            position: relative;
            height: calc(100% - #{$toolbar-height});
            background-color: transparent;
            overflow-x: hidden;
            // Permette l'animazione
            ui-view {
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
            }

            .content-wrapper {
                padding: 16px;
                position: relative;

                &:not(.auto-height) {
                    height: 100%;
                }

                &.with-boxes {
                    // Ogni box ha un suo padding per gestire correttamente le distanze in tutti i dispositivi
                    padding: 8px;
                }

                > er-loading {
                    // Fix posizione caricamento (solo quello generico) in quanto abbiamo una sovrapposizione di elementi
                    top: -#{$header-height};
                    height: calc(100% + #{$header-height});
                }
            }
        }
    }
}

// Group container
.group-container {
    .second-column {
        margin-top: 0px !important;
    }

    @media(min-width: $layout-breakpoint-xs) {
        > *:first-child {
            margin-right: 8px;
        }

        > *:last-child {
            margin-left: 8px;
        }

        > *:not(:first-child):not(:last-child) {
            margin-right: 8px;
            margin-left: 8px;
        }
    }

    @media(max-width: $layout-breakpoint-xs) {
        > *:not(:first-child) {
            margin-top: 16px;
        }
    }
}

@media screen and (max-width: $layout-breakpoint-xs) {
    #content-wrapper-with-toolbar #content-container #content {
        .content-wrapper {
            padding: 0;
            // Fix posizione caricamento (solo quello generico) in quanto abbiamo una sovrapposizione di elementi
            > er-loading {
                top: -#{$header-height};
                height: calc(100% + #{$header-height});
            }
        }
    }
}

// Group container large
.group-container-md {
    .second-column {
        margin-top: 0px !important;
    }

    @media(min-width: $layout-breakpoint-md) {
        > *:first-child {
            margin-right: 8px;
        }

        > *:last-child {
            margin-left: 8px;
        }

        > *:not(:first-child):not(:last-child) {
            margin-right: 8px;
            margin-left: 8px;
        }
    }
}

// Group container large
.group-container-lg {
    .second-column {
        margin-top: 0px !important;
    }

    @media(min-width: $layout-breakpoint-lg) {
        > *:first-child {
            margin-right: 8px;
        }

        > *:last-child {
            margin-left: 8px;
        }

        > *:not(:first-child):not(:last-child) {
            margin-right: 8px;
            margin-left: 8px;
        }
    }
}

// Google maps info window content
.google-maps-infowindow-button-container {
    text-align: left;
    margin-top: 5px;

    .md-button {
        margin-left: 0;
        background-color: rgba(158, 158, 158, 0.2);
    }
}