@use '@angular/cdk/overlay-prebuilt.css';
@use '@angular/material' as mat;
@use './scss/theming/app-shell' as app-shell;
@use './scss/theme' as theme;
@use './scss/overrides';
@use './scss/component';
@use './scss/utils';

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.

:root {
  @include mat.all-component-themes(theme.$light);
  @include mat.typography-hierarchy(theme.$light);
  @include component.stepper-theme(theme.$light);
  @include component.layout-theme(theme.$light);
  @include component.dialog-theme(theme.$light);
  @include component.links-theme(theme.$light);
  @include component.form-theme(theme.$light);
  @include component.fab-theme(theme.$light);

  @include app-shell.theme(theme.$light);
}

// Comment out the line below if you want to use the pre-defined typography utility classes.
// For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
// @include mat.typography-hierarchy(theme.$light);

// Comment out the line below if you want to use the deprecated `color` inputs.
// @include mat.color-variants-backwards-compatibility(theme.$light);
/* You can add global styles to this file, and also import other style files */

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 200 to 900

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: 'Mukta', sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

body {
  a[href] {
    color: unset;
    text-decoration: none;
  }

  .error-message {
    color: mat.get-theme-color(theme.$light, error, 50);
  }
}

@include mat.color-variants-backwards-compatibility(theme.$light);
