@use 'sass:map';
@use '~@angular/material' as mat;
@import '../app/auth/auth.component.scss';
@import '../app/core/sidemenu/sidemenu.component.scss';
@import '../app/core/sidemenu-item/sidemenu-item.component.scss';
@import '../app/dashboard-widget/dashcard/dashcard.component.scss';
@import '../app/dashboard-widget/profile-card/profile-card.component.scss';
@import '../app/dashboard-widget/round-progressbar/round-progressbar.component.scss';
@import '../app/dashboard-widget/sales-list/sales-list.component.scss';

//mat.$light-theme-background-palette:(
//  status-bar:map_get(mat.$grey-palette, 300),
//  app-bar:map_get(mat.$grey-palette, 100),
//  background: map_get(mat.$indigo-palette, 50),
//  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
//  card:       white,
//  dialog:     white,
//  disabled-button: rgba(black, 0.12),
//  raised-button: white,
//  focused-button: rgba(black, 0.06),
//  selected-button: map_get(mat.$grey-palette, 300),
//  selected-disabled-button: map_get(mat.$grey-palette, 400),
//  disabled-button-toggle: map_get(mat.$grey-palette, 200),
//  unselected-chip: map_get(mat.$grey-palette, 300),
//  disabled-list-option: map_get(mat.$grey-palette, 200),
//);

@include mat.core();

$primary : mat.$indigo-palette;
$accent  : mat.$orange-palette;
$warn    : mat.$red-palette;



$primary-app-primary: mat.define-palette($primary , 400);
$primary-app-accent:  mat.define-palette($accent , 900);
$primary-app-warn:    mat.define-palette($warn );
$cdk-theme:   mat.define-light-theme($primary-app-primary, $primary-app-accent,$primary-app-warn);

cdk-sidemenu{
    $sidemenu-app-primary: mat.define-palette($primary , 400);
    $sidemenu-app-accent:  mat.define-palette($accent , 900);
    $sidemenu-app-warn:    mat.define-palette($warn );
    $cdk-sidemenu-theme:   mat.define-dark-theme($sidemenu-app-primary, $sidemenu-app-accent,$sidemenu-app-warn);
    @include mat.list-theme($cdk-sidemenu-theme);
}


cdk-sidemenu-item{
    @include sidemenu-item($cdk-theme,20px)
}


cdk-dashcard {
    $dashcard-primary: mat.define-palette($primary);
    $dashcard-accent:  mat.define-palette($accent);
    $dashcard-warn:    mat.define-palette($warn);
    $dashcard-theme:   mat.define-dark-theme($dashcard-primary, $dashcard-accent,$dashcard-warn);
    @include dashcard($dashcard-theme);
}

cdk-profile-card{
  $dashboard-profile-primary: mat.define-palette($primary , 400);
    $dashboard-profile-accent:  mat.define-palette($accent , 900);
    $dashboard-profile-warn:    mat.define-palette($warn );
    $cdk-dashboard-profile-theme:   mat.define-dark-theme($dashboard-profile-primary, $dashboard-profile-accent,$dashboard-profile-warn);
    @include dashboard-profile($cdk-dashboard-profile-theme);
    @include mat.tabs-theme($cdk-dashboard-profile-theme);
}
@include mat.all-component-themes($cdk-theme);
@include auth($cdk-theme);
@include round-progressbar($cdk-theme);
@include sales-list($cdk-theme);

html {
  height:100%;
}
body{
  padding: 0px !important;
  margin: 0px !important;
  height:100%;
}
.components-container-gt-xs {
    padding: 20px;
    // background-color: #fdfdfd;
}
.components-container-xs {
    padding: 5px !important;
    // background-color: #fdfdfd;
}
.component-preview {
    padding: 20px;
}
.ps-content {
  height: 100%;
}

.loader-container {
    background-color: white;
    width: 100vw;
    height: 100vh;
    z-index: 2000;
    position: absolute;

    -moz-animation: cssAnimation 1s ease-in 3s forwards;
    /* Firefox */
    animation: cssAnimation 1s ease-in 3s forwards;
    /* Safari and Chrome */
    -o-animation: cssAnimation 1s ease-in 3s forwards;
    /* Opera */
    animation: cssAnimation 1s ease-in 3s forwards;
    animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

@keyframes cssAnimation {
    to {
        opacity:0;
        display: none;
        visibility:hidden;
    }
}
@keyframes cssAnimation {
    to {
        visibility:hidden;
        opacity:0;
        display: none;
    }
}



.spinner {
    margin: 50vh auto 0;
    width: 70px;
    text-align: center;
}

.spinner > div {
  width: 18px;
  height: 18px;


  border-radius: 100%;
  display: inline-block;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.bounce3 {
    background-color: orange;
}

.spinner .bounce1 {
    background-color: blue;
  animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
    background-color: red;
  animation-delay: -0.16s;
  animation-delay: -0.16s;
}



@keyframes sk-bouncedelay {
  0%, 80%, 100% { transform: scale(0) }
  40% { transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    transform: scale(0);
    transform: scale(0);
  } 40% {
    transform: scale(1.0);
    transform: scale(1.0);
  }
}
