/* You can add global styles to this file, and also import other style files */

@use '@angular/material' as mat;

html,
body {
  height: 100%;
}

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

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

/* 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;
}