// 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);

    $is-dark-theme: map-get($theme, is-dark);

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

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

    .anchor-button {
        color: mat-color($foreground, text) !important;
    }

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

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

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

    .underline {
        border-bottom: 1px solid mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
    }

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

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

    .error,
    .warn {
        color: mat-color($warn);
    }

    .outline-border-bottom {
        border-bottom: 1px solid $os-outline;
    }

    /* 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);
    }

    .os-amount-chip {
        background: mat-color($background, selected-button);
        color: mat-color($foreground, text);
    }

    .tile-text {
        color: mat-color($foreground, text);
    }

    .tile-color {
        background-color: mat-color($background, selected-button);
    }

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

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

    .subtitle {
        color: mat-color($foreground, secondary-text);
        font-size: 12px;
        font-weight: 400;
    }

    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 */
    .backgroundColorAccent {
        background-color: mat-color($accent);
        color: mat-color($accent, default-contrast) !important;
    }

    .backgroundColorSelected {
        background-color: rgba(0, 0, 0, 0.155);
        color: mat-color($foreground, text) !important;
    }

    .backgroundColorLight {
        background-color: mat-color($background, hover);
        color: mat-color($foreground, text) !important;
    }

    input[readonly] {
        cursor: default;
    }

    .stretch-to-fill-parent {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }

    /** Custom themes for NGrid. Could be an own file if it gets more */
    .pbl-ngrid-container {
        background: mat-color($background, card);
    }

    .pbl-ngrid-no-data {
        color: mat-color($foreground, secondary-text);
    }

    .pbl-ngrid-row:hover {
        background-color: rgba(0, 0, 0, 0.025);
    }

    .mat-progress-bar-buffer {
        background-color: mat-color($background, card) !important;
    }
}
