@use '~@angular/material' as mat;
$black-87-opacity: rgba(0,0,0, .87);

// You can define colors here (using http://mcg.mbitson.com)
$mat-primary: (
    50 : #E0F3F3,
    100 : #B3E0E0,
    200 : #80CCCC,
    300 : #4DB8B8,
    400 : #26A8A8,
    500 : #009999,
    600 : #009191,
    700 : #008686,
    800 : #007C7C,
    900 : #006B6B,
    A100 : #9AFFFF,
    A200 : #67FFFF,
    A400 : #34FFFF,
    A700 : #1AFFFF,
    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-secondary: (
    50 : #E0F3F3,
    100 : #B3E0E0,
    200 : #80CCCC,
    300 : #4DB8B8,
    400 : #26A8A8,
    500 : #009999,
    600 : #009191,
    700 : #008686,
    800 : #007C7C,
    900 : #006B6B,
    A100 : #9AFFFF,
    A200 : #67FFFF,
    A400 : #34FFFF,
    A700 : #1AFFFF,
    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,
    )
);


// mandatory stuff for theming
$egret-primary: mat.define-palette($mat-primary);
$egret-accent:  mat.define-palette($mat-secondary);
// include the custom theme components into a theme object
$egret-theme: mat.define-light-theme($egret-primary, $egret-accent);
$primary-dark: darken( map-get($mat-primary, 500), 8% );

// include the custom theme object into the angular material theme
.egret-default {
    @include mat.all-component-themes($egret-theme);
    .mat-bg-primary,
    .topbar,
    .chats-wrap .conversations-hold .single-conversation.me .conversation-msg,
    .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a,
    .fileupload-drop-zone.dz-file-over,
    .toolbar-avatar.online > .status-dot,
    .cal-open-day-events,
    div.hopscotch-bubble {
        background: map-get($mat-primary, 500) !important;
        color: #ffffff !important;
    }
    .mat-color-primary,
    .list-item-active,
    .sidenav-hold .sidenav li.open a .mat-icon:not(.menu-caret),
    .sidenav-hold .sidenav li.open > div > a > span:not(.menuitem-badge),
    .sidenav-hold .sidenav li.open > a > span {
        color: map-get($mat-primary, 500) !important;
    }
    .topnav ul.menu > li > div.open > a,
    .topnav ul.menu > li > div.open > div,
    .sidebar-panel .sidebar-list-item.open > .mat-list-item-content > .sub-menu,
    .sidenav-hold .sidenav li.open a .mat-icon:not(.menu-caret),
    .list-item-active {
        border-color: map-get($mat-primary, 500) !important;
    }
    /*.sidebar-panel {
        background: url('../../assets/images/sidebar-bg.jpg') no-repeat;
    } */
    .sidebar-compact ul.submenu,
    .default-bg {
        // background:  map-get($mat-primary, 500) !important;
        background:  #ffffff !important;
    }
    .branding.default-bg.top-logo-bg {
        background: map-get($mat-primary, 500) !important;
    }
    /* Hopscotch Tour */ 
    div.hopscotch-bubble {
        border-color: $primary-dark;
    }
    /* up arrow  */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
        border-bottom: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
        border-bottom: 17px solid map-get($mat-primary, 500);
        top: -16px;
    }
    /* right arrow */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
        border-left: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
        border-left: 17px solid map-get($mat-primary, 500);
        left: -1px;
    }
    /* bottom arrow */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
        border-top: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
        border-top: 17px solid map-get($mat-primary, 500);
        top: -18px;
    }
    /* Left Arrow */
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
        border-right: 17px solid $primary-dark;
    }
    div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
        left: 1px;
        border-right: 17px solid map-get($mat-primary, 500);
    }

    .mat-bg-accent,
    div.hopscotch-bubble .hopscotch-bubble-number,
    div.hopscotch-bubble .hopscotch-nav-button.next:hover,
    div.hopscotch-bubble .hopscotch-nav-button.next {
        background-color: map-get($mat-secondary, 500);
        color: #ffffff;
    }
    .mat-bg-warn {
        background-color: #f44336;
        color: white;
    }
    .mat-color-accent {
        color: map-get($mat-secondary, 500);
    }
    .mat-color-warn {
        color: #f44336;
    }
    .mat-color-default {
        color: rgba(0, 0, 0, 0.87);
    }
    .mat-tooltip {
        max-width: max-content;
        word-break: break-word;
        font-size: 11px;
    }
    .mat-form-field{
        line-height: 1.25 !important;
        }



}