@import 'angular-material-variables';
@import 'variables';

$sidenav-filters-width: 480px;
$sidenav-filters-mobile-width: 100%;
$sidenav-filters-actions-background: rgba(0, 0, 0, 0.03);
$sidenav-filters-actions-border: 1px solid rgba(0, 0, 0, 0.06);
$sidenav-filters-actions-height: 48px;

.sidenav-filters {
    width: $sidenav-filters-width;
    min-width: $sidenav-filters-width;
    max-width: $sidenav-filters-width;

    > md-content {
        md-tabs {
            // 48px => Altezza bottoni
            height: calc(100% - #{$sidenav-filters-actions-height});
            min-height: calc(100% - #{$sidenav-filters-actions-height});
            max-height: calc(100% - #{$sidenav-filters-actions-height});

            md-tabs-wrapper {
                background-color: $sidenav-filters-actions-background;
                border-bottom: $sidenav-filters-actions-border;

                .md-tab {
                    max-width: none !important;
                }
            }

            md-tabs-content-wrapper {
                md-tab-content {
                    &, > div, md-content {
                        height: 100%;
                        overflow: hidden;
                    }

                    .sidenav-filter {
                        padding: 12px;

                        &:nth-child(even) {
                            background-color: rgba(0, 0, 0, 0.02);
                        }

                        > * {
                            width: 100%;
                        }

                        .md-errors-spacer {
                            display: none;
                        }
                    }
                }
            }
        }
    }

    .sidenav-filters-actions {
        background-color: $sidenav-filters-actions-background;
        border-top: $sidenav-filters-actions-border;
        height: $sidenav-filters-actions-height;
    }
}

// Responsive
@media screen and (max-width: $layout-breakpoint-xs) {
    .sidenav-filters {
        width: $sidenav-filters-mobile-width;
        min-width: $sidenav-filters-mobile-width;
        max-width: $sidenav-filters-mobile-width;
    }
}