// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import '~@angular/material/theming';
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();


@import './variables.scss';

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$light-theme: mat-light-theme((color: (primary: $light-primary,
      accent: $light-accent,
      warn: $light-warn,
    )));

// Define an alternate dark theme.
$dark-theme: mat-dark-theme((color: (primary: $dark-primary,
      accent: $dark-accent,
      warn: $dark-warn,
    )));

// 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.
@include angular-material-theme($light-theme);


.dark-theme {
  @include angular-material-color($dark-theme);
}



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

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(assets/fonts/material_icons.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  max-height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

app-root {
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
}

mat-card {
  max-width: 400px;
  margin: 2em auto;
}

mat-form-field {
  display: block;
}

mat-form-field {
  &.ng-valid {
    .mat-form-field-wrapper {
      padding-bottom: 1.25em;
    }
  }

  &.ng-invalid,
  &.mat-form-field-invalid {
    .mat-form-field-wrapper {
      padding-bottom: 7px;
    }
  }

  &.ng-untouched {
    .mat-form-field-wrapper {
      padding-bottom: 1.25em;
    }
  }

  .mat-form-field {
    &-underline {
      position: static;
    }

    &-subscript-wrapper {
      position: static;
    }
  }
}

qrcode {
  margin: 0 auto;
  text-align: center;
}

qrcode canvas {
  width: 100% !important;
  height: auto !important;
  max-width: 400px !important;
}

.spacer {
  flex: 1 1 auto;
}

.hint {
  opacity: 0.7;
}

.mat-drawer-inner-container {
  display: flex;
  flex-direction: column;
}

mat-sidenav-container {
  height: 100%;
  max-height: 100%;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;

  @media screen and (min-width: 576px) {
    width: 540px;
  }

  @media screen and (min-width: 768px) {
    width: 580px;
  }

  @media screen and (min-width: 992px) {
    width: 820px;
  }

  @media screen and (min-width: 1200px) {
    width: 1000px;
  }
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

.text-right {
  text-align: right;
}
