@use "@angular/material" as mat;

@include mat.core();

$my-app-primary: mat.define-palette(mat.$orange-palette);
$my-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
$my-app-warn: mat.define-palette(mat.$red-palette);

$my-app-theme: mat.define-light-theme(
  (
    color: (
      primary: $my-app-primary,
      accent: $my-app-accent,
      warn: $my-app-warn,
    ),
  )
);

@include mat.all-component-themes($my-app-theme);


html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }

/* default .loading styles, .loading should be invisible, opacity: 0, z-index: -1 */
.AppLoading {
    margin-top: -10px;
    margin-left: -10px;
    opacity: 0;
    transition: opacity .8s ease-in-out;
    position: fixed;
    height: 105%;
    width: 105%;
    z-index: -1;
    background-color: lightgrey;
    background-image: url('./assets/loader.gif');
    background-repeat: no-repeat;
    background-position: center;
  }
  
  /* .loading screen is visible when app is not bootstrapped yet, my-app is empty */
  app-root:empty + .AppLoading {
    opacity: 1;
    z-index: 100;
  }

  :root {
    --avatar-size: 30px;
  }
  
  .avatar {
    background-color: #ccc;
    border-radius: 50%;
    height: var(--avatar-size);
    text-align: center;
    width: var(--avatar-size);
    vertical-align: middle;
    margin-right: 10px;
  }