@use '@angular/material' as mat;
$mat-dusk-blue: (
  50: #e8eaf6,
  100: #c5cae9,
  200: #6294b8,
  300: #386d92,
  400: #144463,
  500: #083652,
  700: #083652,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  )
);
$mat-dusk-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  500: #ff3919,
  700: #ff3919,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: white,
    500: white,
    600: white,
    700: white,
    800: white,
    900: white,
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: white,
    A700: white,
  )
);
$dusk-primary: mat.define-palette($mat-dusk-blue, 500);
$dusk-accent: mat.define-palette($mat-dusk-red, 500);
$dusk-warn: mat.define-palette(mat.$red-palette, 500);
$dusk-theme: mat.define-light-theme((
  color: (
    primary: $dusk-primary,
    accent: $dusk-accent,
    warn: $dusk-warn,
  )
));

.app-theme-dusk {
  @include mat.all-component-themes($dusk-theme);
  $dusk-primary-color: #476190;
  $dusk-accent-color: #ff3919;
  .notification-circle {
    background-color: $dusk-accent-color !important;
  }
  .topbar-items-container > div,
  .mat-toolbar, .mat-toolbar .mat-icon,
  .mat-mdc-raised-button.mat-primary > span, .mat-mdc-fab mat-icon {
    color: #fff;
  }
  .sidenav-container, .sub-header {
    background: #f1f1f1;
  }
  .fl-card-fixed,
  .fl-card-fixed-md,
  .fl-card-fixed-sm {
    @include mat.elevation(2);
  }
  mat-icon {
    color: grey;
  }
  a[disabled] .mat-icon, button[disabled] .mat-icon {
    color: lightgrey;
  }
  .mat-mdc-button-base {
    text-transform: uppercase;
  }
  .active-link, .active-link mat-icon, .notification-text a, .message-body a, .ticket-message a:not(.timestamp-link) {
    color: $dusk-primary-color !important;
  }
  .object-card-content {
    margin-left: 15px;
    font-size: 14px;
    line-height: 20px;
    word-break: break-all;
    color: #616161;
  }
  .fl-tag {
    background-color: #878787;
    color: white;
    padding: 2px 8px 2px 8px;
    border-radius: 2px;
    font-weight: normal;
  }
}
