@import "~@angular/material/theming";

@include mat-core();

// Palettes generated using Material Design Palette Designer (http://mcg.mbitson.com/)

// Core Colors
$mat-cisco-blue: (
    50 : #e1f3fa,
    100 : #b4e2f4,
    200 : #82cfec,
    300 : #4fbce4,
    400 : #2aaddf,
    500 : #049fd9,
    600 : #0397d5,
    700 : #038dcf,
    800 : #0283ca,
    900 : #0172c0,
    A100 : #e9f5ff,
    A200 : #b6ddff,
    A400 : #83c6ff,
    A700 : #69baff,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-sage-green: (
    50 : #f5f8e7,
    100 : #e6edc2,
    200 : #d5e199,
    300 : #c4d470,
    400 : #b8cb52,
    500 : #abc233,
    600 : #a4bc2e,
    700 : #9ab427,
    800 : #91ac20,
    900 : #809f14,
    A100 : #f4ffd2,
    A200 : #e8ff9f,
    A400 : #dcff6c,
    A700 : #d5ff52,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #000000,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

// Status Colors
$mat-status-red: (
    50 : #f9e4e6,
    100 : #f1bcc1,
    200 : #e79098,
    300 : #dd636e,
    400 : #d6414f,
    500 : #cf2030,
    600 : #ca1c2b,
    700 : #c31824,
    800 : #bd131e,
    900 : #b20b13,
    A100 : #ffdfe0,
    A200 : #ffacae,
    A400 : #ff797d,
    A700 : #ff5f64,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #ffffff,
        500 : #ffffff,
        600 : #ffffff,
        700 : #ffffff,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-status-green: (
    50 : #edf7e9,
    100 : #d3ecc9,
    200 : #b6e0a5,
    300 : #98d380,
    400 : #82c965,
    500 : #6cc04a,
    600 : #64ba43,
    700 : #59b23a,
    800 : #4faa32,
    900 : #3d9c22,
    A100 : #e0ffd9,
    A200 : #b7ffa6,
    A400 : #8eff73,
    A700 : #7aff59,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #000000,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$mat-status-orange: (
    50 : #ffeee0,
    100 : #ffd5b3,
    200 : #ffb980,
    300 : #ff9d4d,
    400 : #ff8826,
    500 : #ff7300,
    600 : #ff6b00,
    700 : #ff6000,
    800 : #ff5600,
    900 : #ff4300,
    A100 : #ffffff,
    A200 : #fff5f2,
    A400 : #ffccbf,
    A700 : #ffb8a6,
    contrast: (
        50 : #000000,
        100 : #000000,
        200 : #000000,
        300 : #000000,
        400 : #000000,
        500 : #000000,
        600 : #000000,
        700 : #000000,
        800 : #ffffff,
        900 : #ffffff,
        A100 : #000000,
        A200 : #000000,
        A400 : #000000,
        A700 : #000000,
    )
);

$custom-theme-primary: mat-palette($mat-cisco-blue); // Primary
$custom-theme-accent: mat-palette($mat-sage-green); // Accent (Secondary)
$custom-theme-warn: mat-palette($mat-status-red); // Warn (Negative)

$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);

@include angular-material-theme($custom-theme);

$cui-resource-path: "~cisco-ui/dist";
@import "~cisco-ui/src/scss/cui-standard.scss";

.cdk-overlay-backdrop,
.cdk-global-overlay-wrapper {
    z-index: 1000 !important;
}

@import "~font-awesome/css/font-awesome.min.css";
@import "~material-design-icons-iconfont/dist/material-design-icons.css";

html, body {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: auto;
}

// Presentations
.cdk-overlay-pane.fullscreen {
    height: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

.cdk-overlay-pane.fullscreen .mat-dialog-container {
    max-width: 100%;
    max-height: 100%;
    padding: 0;
    border-radius: 0;
}

.slide-container {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

    .slide-container > .slide-header {
        height: auto;
        order: 1;
        padding: 10px;
        overflow: hidden;
    }

    .slide-container > .slide-body {
        flex: 1;
        order: 2;
        padding: 0;
        overflow: hidden;
    }

    .slide-container > .slide-footer {
        height: auto;
        order: 3;
        padding: 10px;
        overflow: hidden;
    }

    .slide-header + .slide-body,
    .slide-header + .slide-footer,
    .slide-body + .slide-footer, {
        border-top: 1px solid #dfdfdf;
    }

    .slide-container > .slide-actions {
        position: absolute;
        bottom: 10px;
        right: 10px;
        // display: none;
        z-index: +1;
    }

    /*
    .slide-container:hover > .slide-actions {
        display: block;
    }
    */

.fullscreen .slide-container .widget-container,
.fullscreen .slide-container .widget {
    width: 100%;
    height: 100%;
    box-shadow: none;
}