@import '~@angular/material/theming';

/** Custom component theme. Only lives in a specific scope */
@mixin os-site-theme($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    os-site {
        /* main background color */
        .main-container {
            background-color: mat-color($background, background);
        }
        .nav-toolbar {
            background-color: mat-color($background, card); //TODO
        }

        .nav-toggle-button {
            background: mat-color($background, background);
            color: mat-color($foreground, icon);
        }

        /* seperator */
        mat-nav-list.main-nav,
        mat-divider {
            border-top-color: $os-outline;
        }

        /** style and align the nav icons the icons*/
        .main-nav,
        .user-menu {
            mat-icon {
                color: mat-color($foreground, icon);
            }
            span {
                color: mat-color($foreground, text);
            }
        }

        /** style the active link */
        .active {
            mat-icon {
                color: mat-color($primary);
            }
            span {
                color: mat-color($primary);
            }
        }

        /** style for the offline-banner */
        .offline-banner {
            display: flex;
            top: 0;
            z-index: 2;
            width: 100%;
            height: 20px;
            background: mat-color($primary, 900);
            align-items: center;
            justify-content: center;
            color: white;

            mat-icon {
                $font-size: 16px;
                width: $font-size;
                height: $font-size;
                font-size: $font-size;
            }

            span {
                font-size: 90%;
                margin: 0 5px;
            }
        }
    }
}