@use '@angular/material' as mat;

mat.$theme-ignore-duplication-warnings: true;

/*
@use '@angular/material' as mat;
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

@import url('https://fonts.googleapis.com/css?family=Roboto');
*/
@use '@fortawesome/fontawesome-free/css/all.css' as *;

@use  'mixins' as *;
@use  'material-customization' as *;
@use  'hover' as *;

@use 'toolbar' as *;

@use 'theme/cory-mat-theme-dark-matrix' as *;
@use  'theme/cory-mat-theme-light-forest' as *;


@use 'variables' as matcory;

// TODO(v15): As of v15 mat.legacy-core no longer includes default typography styles.
//  The following line adds:
//    1. Default typography styles for all components
//    2. Styles for typography hierarchy classes (e.g. .mat-headline-1)
//  If you specify typography styles for the components you use elsewhere, you should delete this line.
//  If you don't need the default component typographies but still want the hierarchy styles,
//  you can delete this line and instead use:
//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
@include mat.all-component-typographies();
@include mat.elevation-classes();
@include mat.app-background();

// The following mixins include base theme styles that are only needed once per application. These
// theme styles do not depend on the color, typography, or density settings in your theme. However,
// these styles may differ depending on the theme's design system. Currently all themes use the
// Material 2 design system, but in the future it may be possible to create theme based on other
// design systems, such as Material 3.
//
// Please note: you do not need to include the 'base' mixins, if you include the corresponding
// 'theme' mixin elsewhere in your Sass. The full 'theme' mixins already include the base styles.
//
// To learn more about "base" theme styles visit our theming guide:
// https://material.angular.io/guide/theming#theming-dimensions
//
// TODO(v17): Please move these @include statements to the preferred place in your Sass, and pass
// your theme to them. This will ensure the correct values for your app are included.
//@include mat.all-component-bases(__<<ngM2ThemingMigrationEscapedComment1>>__);



body {
    font-family: Roboto, Arial, sans-serif;
    padding: 0;
    margin: 0;
}

.cory-mat-fill-horizontal {
    flex: 1 1 auto;
}

body.cory-mat-theme-dark {
    color: white;
}

.cory-mat-theme-dark {

    color: white;
    .cory-mat-menu-divider {
        margin-top: 3px;
        margin-bottom: 3px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .cory-mat-menu-item-active, .cory-mat-menu-item-active:hover {
        background-color: rgba(255, 255, 255, 0.2) !important;
    }

}

.cory-mat-theme-light {
    color: white;
    .cory-mat-menu-divider {
        margin-top: 3px;
        margin-bottom: 3px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    }
    .cory-mat-menu-item-active, .cory-mat-menu-item-active:hover {
        background-color: rgba(128, 128, 128, 0.2) !important;
    }
}

/* <a mat-menu-item> normalization — don't underline, don't recolor on visited,
   let the star floated at top:-18px render outside the menu-item overflow box.
*/
/* <a mat-menu-item> normalization. Suppress <a> UA styling (underline,
   outline, tap-highlight). Color: don't force inherit — Material's default
   rgba(0,0,0,0.87) / theme color for .mat-mdc-menu-item already wins. */
a.mat-mdc-menu-item,
a.mat-mdc-menu-item:link,
a.mat-mdc-menu-item:visited,
a.mat-mdc-menu-item:hover,
a.mat-mdc-menu-item:focus,
a.mat-mdc-menu-item:focus-visible,
a.mat-mdc-menu-item:active {
    text-decoration: none !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent !important;
}
/* Sidenav drawer: prod renders drawer items with inline style="display: block"
   plus inline-flow children (bare <span>, float:right <div> for code). Match
   that layout. Also force Arial (prod's <button> inherits it from the browser
   UA; our <a> would otherwise inherit Roboto from body). */
mat-sidenav a.mat-mdc-menu-item {
    display: block !important;
    font-family: Arial;
}
mat-sidenav .mat-mdc-menu-item-text {
    display: inline !important;
    position: relative;
    top: 15px;
}
/* Header Menu dropdown (CDK overlay panel): prod keeps Material's default
   flex layout — do NOT force display:block. Only override font-family so
   <a> matches prod's <button> UA font. */
.mat-mdc-menu-panel a.mat-mdc-menu-item {
    font-family: Arial;
    line-height: normal;
}


.cory-mat-hide-xsmall {
    @media screen and (max-width: matcory.$cory-mat-size-xsmall) {
        display: none;
    };
}


.cory-mat-container {

    & {
        margin-top: 0px !important;
        margin-bottom: 0px !important;
        margin-left: 0;
        margin-right: 0;    
    }

    .mat-mdc-card {
        margin-top: 10px;
        margin-bottom: 10px;

        box-shadow: 0px 0px 100px 0px rgba(0, 0, 0, 0.25) !important;

        @media screen and (max-width: matcory.$cory-mat-size-xsmall) {
            margin-top: 0px;
            margin-bottom: 0px;
        };

    }



    @media screen and (min-width: matcory.$cory-mat-size-xsmall) {
        margin-top: 20px;
        margin-bottom: 20px;
        margin-left: 20px;
        margin-right: 20px;
    }

    @media screen and (min-width: matcory.$cory-mat-size-medium) {
        width: matcory.$cory-mat-size-medium - 100;
        margin-left: auto;
        margin-right: auto;
    };

}


body {
    height: 100vh;
    min-height: 100vh;
}


.cory-mat-header {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
}

.cory-mat-footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 1;
}