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

/**
 *  Mixin-style to style global classes and tags with theme-related colors.
 */
@mixin os-components-style($theme) {
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $warn: map-get($theme, warn);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);

    h1, h3.accent {
        color: mat-color($primary);
    }

    a {
        color: mat-color($primary);
    }

    .accent-text {
        color: mat-color($accent);
    }

    .button24 {
        color: mat-color($primary);
    }

    .projected .mat-icon {
        color: mat-color($primary);
    }

    //custom table header for search button, filtering and more. Used in ListViews
    .custom-table-header {
        background: mat-color($background, background);
    }

    /* Custom hint and error classes. Same values as .mat-hint and -mat-error */
    .hint,
    .error {
        font-size: 75%;
        display: block;
    }
    .error {
        color: mat-color($warn);
    }

    /* motion list/detail view */
    .mat-chip-list.user .mat-chip {
        color: mat-color($foreground, text);
        background: mat-color($background, card);
        border-color: mat-color($background, selected-button);
    }

    .main-nav-color {
        color: mat-color($foreground, secondary-text);
    }

    .submitters-line {
        color: mat-color($foreground, secondary-text);
    }

    mat-card-header {
        background-color: mat-color($background, app-bar);
    }

    /* drag & drop views */
    .node-content-wrapper {
        background-color: mat-color($background, app-bar);
    }

    /* projector components */
    #chyron {
        background-color: mat-color($primary);
        color: white; // TODO
    }
}