@use "@angular/material" as mat;
@include mat.core();

html {
  @include mat.theme((theme-type: light dark,
      color: (primary: mat.$violet-palette,
        tertiary: mat.$orange-palette,
        use-system-variables: true,
      ),
      typography: Roboto,
      density: 0,
    ));
}

html,
body,
main {
  height: 100%;
}

html,
body,
main,
content,
nav {
  background-color: var(--mat-sys-background);
  color: var(--mat-sys-on-background);
}

.mat-mdc-card-header,
.mat-mdc-card-actions {
  color: var(--mat-sys-on-background);
  margin: 1em;
}

.mat-mdc-card-actions {
  padding: 0;
  margin: 0;
}

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

.light-theme {
  color-scheme: light;
}

.dark-theme {
  color-scheme: dark;
}

.mat-mdc-dialog-surface {
  background-color: transparent !important;
}

.mat-mdc-card-actions {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}

.mat-mdc-button {
  color: var(--mat-sys-on-background);
}

/* width */
::-webkit-scrollbar {
  width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey;
  border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: darkgrey;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgb(122, 122, 122);
}

.mat-small {
  @include mat.all-component-densities(-5);
}

.mat-large {
  @include mat.all-component-densities(5);
}

.confirm {
  @include mat.button-overrides(( //text-state-layer-color: rgb(52, 255, 62),
      text-label-text-color: rgb(71, 218, 78),
      text-disabled-label-text-color: rgb(71, 218, 78),
    ));
}

.neutral {
  @include mat.button-overrides(( //text-state-layer-color: rgb(64, 141, 255),
      text-label-text-color: rgb(52, 106, 255),
      text-disabled-label-text-color: rgb(52, 106, 255),
    ));
}

.warning {
  @include mat.button-overrides(( //text-state-layer-color: rgb(255, 172, 63),
      text-label-text-color: rgb(255, 145, 19),
      text-disabled-label-text-color: rgb(255, 145, 19),
    ));
}

.danger {
  @include mat.button-overrides(( //text-state-layer-color: rgb(255, 48, 48),
      text-label-text-color: rgb(255, 52, 52),
      text-disabled-label-text-color: rgb(255, 52, 52),
      filled-label-text-color: rgb(255, 52, 52),
      outlined-label-text-color: rgb(255, 52, 52),
      protected-label-text-color: rgb(255, 52, 52),
      protected-state-layer-color: rgb(255, 75, 75),
      protected-ripple-color: rgb(255, 154, 154),
    ));
}

.error {
  display: block;
  color: #ba1a1a;
}

.below {
  display: block;
  justify-self: center;
  align-items: center;
  align-self: center;
  text-align: center;
}

@include mat.button-overrides((text-label-text-color: --mat-sys-on-primary,
    protected-label-text-color: --mat-sys-on-primary,
    //state-layer-color: --mat-sys-on-primary,
  ));

html,
body {
  height: 100%;
}

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