@import "~@angular/material/theming";
@import "materials_theme";
@import "variables";

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: $font-family-sans-serif;
}

$general-typography: mat-typography-config(
  $font-family: "AmericanSansLight, AmericanSans, AmericanSansMedium",
  $input: mat-typography-level(inherit, 1.125, 600)
);

@include mat-core($general-typography);

@include angular-material-theme($theme);

@mixin mix-app-theme($app-theme) {
  $primary: map-get($app-theme, primary);
  $accent: map-get($app-theme, accent);

  .mat-button-toggle {
    background-color: mat-color($primary);
    color: mat-color($primary, default-contrast);
  }
}

table.mat-table th {
  background-color: mat-color($md-gray, 50);
}

.dark-theme {
  @include angular-material-theme($dark-theme);

  table.mat-table th {
    background-color: mat-color($md-gray, 900);
  }

  .table-warning,
  .table-warning > th,
  .table-warning > td {
    background-color: mat-color($md-darkorange, 700);
  }

  .table-danger,
  .table-danger > th,
  .table-danger > td {
    background-color: mat-color($md-darkred, 900);
  }

  .mat-menu-panel {
    color: white;
  }
}

.spacer {
  flex: 1 1 auto;
}

button:focus {
  outline: none !important;
}