@use '@angular/material' as mat;
$mat-navy-blue: (
  50: #eceff1,
  100: #cfd8dc,
  200: #b0bec5,
  300: #90a4ae,
  400: #78909c,
  500: #345fad,
  700: #345fad,
  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-navy-red: (
  50: #ffebee,
  100: #ffcdd2,
  200: #ef9a9a,
  300: #e57373,
  500: #ff5252,
  700: #ff5252,
  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,
  )
);
$navy-primary: mat.define-palette($mat-navy-blue, 500);
$navy-accent: mat.define-palette($mat-navy-red, 500);
$navy-warn: mat.define-palette(mat.$red-palette, 500);
$navy-theme: mat.define-light-theme((
  color: (
    primary: $navy-primary,
    accent: $navy-accent,
    warn: $navy-warn,
  )
));

.app-theme-navy {
  @include mat.all-component-themes($navy-theme);
  $navy-primary-color: #345fad;
  $navy-accent-color: #ff5252;
  .notification-circle {
    background-color: $navy-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: $navy-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;
  }
}
