@import '~@angular/material/theming';
@include mat-core();

$md-primary: (
    50 : #e4f2fe,
    100 : #bce0fb,
    200 : #90cbf9,
    300 : #64b6f7,
    400 : #42a6f5,
    500 : #2196f3,
    600 : #1d8ef1,
    700 : #1883ef,
    800 : #1479ed,
    900 : #0b68ea,
    A100 : #ffffff,
    A200 : #e1ecff,
    A400 : #aeccff,
    A700 : #95bcff,
    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,
    )
);

$md-accent: (
    50 : #fffaef,
    100 : #fff4d8,
    200 : #ffecbe,
    300 : #ffe4a4,
    400 : #ffdf91,
    500 : #ffd97d,
    600 : #ffd575,
    700 : #ffcf6a,
    800 : #ffca60,
    900 : #ffc04d,
    A100 : #ffffff,
    A200 : #ffffff,
    A400 : #fffbf3,
    A700 : #fff1da,
    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,
    )
);



// mandatory stuff for theming
$freenas-primary: mat-palette($md-primary);
$freenas-accent:  mat-palette($md-accent);

// include the custom theme components into a theme object
$freenas-theme: mat-light-theme($freenas-primary, $freenas-accent);

$primary-dark: darken( map-get($md-primary, 500), 8% );

// include the custom theme object into the angular material theme
.egret-blue {
    @include angular-material-theme($freenas-theme);

.app-loader {
    background: map-get($md-primary, 500) !important;

}
    .mat-bg-primary,
    .topbar,
    .sidebar-panel.mat-sidenav .sidebar-list-item.open md-icon:not(.menu-caret),
    .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($md-primary, 700) !important;
        color: #ffffff !important;
    }
    .mat-color-primary, .tree, 
    .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > a > span,
    .sidebar-panel.mat-sidenav .sidebar-list-item.open .sub-menu .mat-list-item.selected a {
        color: map-get($md-primary, 700) !important;
    }
    .node-content-wrapper-active, 
    .node-content-wrapper.node-content-wrapper-active:hover,
    .node-content-wrapper-active.node-content-wrapper-focused {
        background: map-get($md-primary, 400) !important;
        color: #ffffff;
    }

    .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > .sub-menu {
        border-left: 2px solid map-get($md-primary, 500);
    }
    .sidebar-panel.mat-sidenav {
        background: url('/assets/images/sidebar-bg.jpg') no-repeat;
    }
    .breadcrumb-bar {
        background: #ffffff !important;
    }
    .ngx-datatable.material .datatable-header {
        background-color: map-get($md-primary, 500) !important;
        color: #ffffff !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($md-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($md-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($md-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($md-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($md-accent, 500);
        color: #ffffff;
    }
    .mat-button {
        background-color: map-get($md-primary, 500);
        color: black;   
    }
    .mat-bg-warn {
        background-color: #f44336;
        color: white;
    }
    .mat-color-accent {
        color: map-get($md-accent, 500);
    }
    .mat-color-warn {
        color: #f44336;
    }

    .mat-dialog-title {
        .warning-icon {
          color: #ffc107;
          position: relative;
          top: 8px;
          font-size: 35px;
          margin-right: 10px;
        }
      }
      
      .mat-dialog-content {
        max-width: 600px;
      
      
        .info-panel {
          max-height: 100px;
          padding: 0px;
          border: 0px;
          overflow: hidden;
          -webkit-transition: max-height 0.3s linear;
          -moz-transition: max-height 0.3s linear;
          -o-transition: max-height 0.3s linear;
          -ms-transition: max-height 0.3s linear;
          transition: max-height 0.5s linear;
      
          &.open {
            max-height: calc( 100px + 2rem + 4px );
            padding: 2px;
          }
      
          textarea {
            overflow: auto;
            background: white;
            color: black;
            border: 1px solid #ddd;
            min-height: 100px;
            padding: 1rem;
            width: calc( 100% - 2rem );
          }
        }
    
        .backtrace-panel {
            max-height: 0;
            padding: 0px;
            border: 0px;
            overflow: hidden;
            -webkit-transition: max-height 0.3s linear;
            -moz-transition: max-height 0.3s linear;
            -o-transition: max-height 0.3s linear;
            -ms-transition: max-height 0.3s linear;
            transition: max-height 0.5s linear;
        
            &.open {
              max-height: calc( 100px + 2rem + 4px );
              padding: 2px;
            }
        
            textarea {
              overflow: auto;
              background: white;
              color: black;
              border: 1px solid #ddd;
              min-height: 100px;
              padding: 1rem;
              width: calc( 100% - 2rem );
            }
        }
      }
      
}

