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

@import url('https://fonts.googleapis.com/css2?family=Tiny5&display=swap');

$dark-theme: mat.define-theme((
 color: (
    theme-type: dark,
    primary: mat.$azure-palette,
  )
));


:root {
  @include mat.all-component-themes($dark-theme);
}

$background: #191c1c;
$fonts: #f2f2f2;

html, body { height: 100%; }
body {
  margin: 0;
  color: $fonts;
  font-family: "Tiny5", serif;
  background-color: $background;
}

h1, h2, h3, h4, h5, h6, p, span, a {
  font-family: "Tiny5", serif;
}

:root {
  canvas {
    display: block;
  }
  // card
  --mat-card-title-text-font: "Tiny5", serif;
  --mat-card-subtitle-text-font: "Tiny5", serif;
  --mat-dialog-container-max-width: 100vw;
  .mat-mdc-card-header-text {
    gap: 10px;
    display: flex;
    flex-direction: column;
  }
  .cdk-overlay-pane.mat-mdc-dialog-panel {
    max-width: var(--mat-dialog-container-max-width, 100vw);
    min-width: var(--mat-dialog-container-min-width, 0);
  }

  // button
  --mdc-filled-button-label-text-weight: bold;
  --mdc-filled-button-container-shape: 10px;
  --mat-icon-button-focus-state-layer-opacity: 0;
  .mat-mdc-icon-button, .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
    border-radius: 10px;
  }

  // input
  --mat-datepicker-calendar-text-font: "Tiny5", serif;
  --mat-form-field-container-text-font: "Tiny5", serif;
  --mat-form-field-subscript-text-font: "Tiny5", serif;
  --mdc-outlined-text-field-label-text-font: "Tiny5", serif;

  // icon
  --mat-icon-color: $fonts;

  // chips
  --mdc-chip-label-text-font: "Tiny5", serif;

  // dialog
  .cdk-overlay-dark-backdrop {
    background: rgba(black, $alpha: .8);
    backdrop-filter: blur(10px);
  }
  --mdc-dialog-container-shape: 10px;
}

.game {
  position: absolute;
  width: 100%;
  height: 100%;
}