/* 
 * Custom Theming for Angular Material
 * For more information: https://material.angular.io/guide/theming
 */
@use '@angular/material' as mat;
/* 
 *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();

/* 
 * 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/ 
 */
$sistema-mantenimiento-front-primary: mat.define-palette(mat.$indigo-palette);
$sistema-mantenimiento-front-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

/* The warn palette is optional (defaults to red).*/
$sistema-mantenimiento-front-warn: mat.define-palette(mat.$red-palette);

$amber-palette: (
  50: #FFF8E1,
  100: #FFECB3,
  200: #FFE082,
  300: #FFD54F,
  400: #FFCA28,
  500: #FFC107,
  600: #FFB300,
  700: #FFA000,
  800: #FF8F00,
  900: #FF6F00,
  A100: #FFE57F,
  A200: #FFD740,
  A400: #FFC400,
  A700: #FFAB00,
  contrast: (
    50: rgba(black, 0.87),
    100: rgba(black, 0.87),
    200: rgba(black, 0.87),
    300: rgba(black, 0.87),
    400: rgba(black, 0.87),
    500: rgba(black, 0.87),
    600: rgba(black, 0.87),
    700: rgba(black, 0.87),
    800: rgba(black, 0.87),
    900: rgba(black, 0.87),
    A100: rgba(black, 0.87),
    A200: rgba(black, 0.87),
    A400: rgba(black, 0.87),
    A700: rgba(black, 0.87),
  ),
);

$amber-color: mat.define-palette($amber-palette);

/* 
 * Create the theme object. A theme consists of configurations for individual
 * theming systems such as "color" or "typography".
 */
$sistema-mantenimiento-front-theme: mat.define-light-theme((
  color: (
    primary: $sistema-mantenimiento-front-primary,
    accent: $sistema-mantenimiento-front-accent,
    warn: $sistema-mantenimiento-front-warn,
    amber: $amber-color
  )
));

/* 
 * 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 mat.all-component-themes($sistema-mantenimiento-front-theme);

/*
 * QUILL - SAMPLE OVERRIDES
 */

 quill-editor {
  display: block;
}

.ql-editor:focus {
  border: 1px solid #80bdff !important;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25) !important;
}

/*.ng-invalid {
  border: 1px dashed red;
}*/

/* Set dropdown font-families */

[quill-editor-toolbar] .ql-font span[data-label="Aref Ruqaa"]::before {
  font-family: "Aref Ruqaa";
}

[quill-editor-toolbar] .ql-font span[data-label="Mirza"]::before {
  font-family: "Mirza";
}

[quill-editor-toolbar] .ql-font span[data-label="Roboto"]::before {
  font-family: "Roboto";
}

/* Set content font-families */

.ql-font-mirza {
  font-family: "Mirza";
}

.ql-font-aref {
  font-family: "Aref Ruqaa";
}

.ql-font-roboto {
  font-family: "Roboto";
}

.elevation-z8{
  @include mat.elevation(8);
}

/*
 * ANGULAR MATERIAL
 */

/* 
 * Import library functions for theme creation.
 *
 * 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();
 *
 * Define the default theme (same as the example above).
 * $primary: mat-palette($mat-blue, A700);
 * $accent:  mat-palette($mat-blue-grey, A200, A100, A400);
 * $warn:    mat-palette($mat-red);
 *
 * $theme:   mat-light-theme($primary, $accent);
 *
 * Include the default theme styles.
 * @include angular-material-theme($theme);
 *
 * COMPONENTS
 *
 * make major example component children full width
 * app-root > div > *,
 * app-root > div > * > form,
 * app-root > div > * > ng-form {
 *   display: flex;
 *   flex-direction: column;
 *   gap: 10px;
 * }
 *
 * app-root > div > * {
 *   any root element in an example component, but H3s
 *   > *:not(h3) {
 *     margin-left: 2rem;
 *     margin-right: 2rem;
 *   }
 *
 * make major example component children full width
 * h4,
 * > div,
 * > .ql-container,
 * quill-editor,
 * .mat-form-field {
 *   flex: 1;
 * }

  h3 {
    background: #e0e2e3;
    font-family: sans-serif;
    padding: 2rem;
  }

  h4 {
    text-align: center;
  }

  > button {
    flex: 1 1 32px;
  }

  // only style the example component pre, not quill's
  > pre,
  form > pre {
    background-color: #fcfcfc;
    border: 1px solid #b2b2b2;
    color: #363030;
    padding: 1.5rem;
    white-space: normal;
  }
}

/*
 * Material Quill & MatFormField
 * - demo overrides
 */

/*.mat-form-field {

  // Since the default quill styles already provide padding
  &-appearance-fill .mat-form-field {
    &-flex {
      padding: 0 !important;
    }

    &-infix {
      border-top: 0;
      padding: 0;
    }
  }

  .ql-container {
    // set quill caret to match current Angular Material theme
    caret-color: mat-color($primary, text);

    // Remove redundant quill snow-theme border
    &.ql-snow {
      border: none;
    }

    // Remove all default quill focus indicators
    .ql-editor {
      &:focus {
        border: none !important;
        box-shadow: none !important;
      }
    }
  }

  // make sure any quill tooltips, bubbles, or popups aren't occluded
  .ql-tooltip {
    z-index: 1;
  }
}*/