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

// Use CSS custom properties for palette colors
// via this mixin.
@mixin variable($property, $variable, $fallback, $important:null) {
  #{$property}: $fallback $important;
  #{$property}: var($variable) $important;
}

// Solarized Color Palette - don't forget to add accents to theme.service!
$bg1:    #dddddd; // Canvas like behind the cards
$bg2:    #ffffff; // Main elements like cards
$fg1:    #222222; // brighter fonts
$fg2:    #333333; // normal fonts
$alt-bg1:     #f8f8f2; // Tables
$alt-bg2:     #fafaf5; // Menus
$alt-fg1:     #181a26; // Tables
$alt-fg2:     #282a36; // Menus
$yellow:'#f0cb00';
$orange:'#eec302';
$red:'#ff0013';
$magenta:'#d238ff';
$violet:'#c17ecc';
$blue:'#00a2ff';
$cyan:'#00d0d6';
$green:'#59d600';

// Generated txt colors
$yellow-txt:'#333';
$orange-txt:'#eee';
$red-txt:'#fff';
$magenta-txt:'#fff';
$violet-txt:'#fff';
$blue-txt:'#fff';
$cyan-txt:'#333';
$green-txt:'#fff';
$primary-txt:'#fff';
$accent-txt:'#333';

$primary: $blue;
$accent: $yellow;
$warn: $red;
$tooltip:'inline';//display property
$toggle_pw_display_prop: inline;
$enableWarning: inline;

// Logo images
$logo: url('assets/images/light-logo.svg');
$logo-text: url('assets/images/light-logo-text.svg');

$md-primary: (
    50 : #e0f2fa,
    100 : #b3dff2,
    200 : #80caea,
    300 : #4db5e2,
    400 : #26a5db,
    500 : #0095d5,
    600 : #008dd0,
    700 : #0082ca,
    800 : #0078c4,
    900 : #0067ba,
    A100 : #e3f1ff,
    A200 : #b0d7ff,
    A400 : #7dbdff,
    A700 : #63b0ff,
    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 : #fff8e1,
    100 : #ffecb5,
    200 : #ffe083,
    300 : #ffd451,
    400 : #ffca2c,
    500 : #ffc107,
    600 : #ffbb06,
    700 : #ffb305,
    800 : #ffab04,
    900 : #ff9e02,
    A100 : #ffffff,
    A200 : #fffaf2,
    A400 : #ffe4bf,
    A700 : #ffd9a6,
    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% );

// Bring theme colors to various ripple effects
@mixin mat-ripple-theme($theme) {
  .mat-checkbox .mat-ripple-element, .mat-radio-button .mat-ripple-element {
    @include variable(background, --accent, $accent, !important);
    opacity: 0.4;
  }
  .mat-button.mat-primary .mat-ripple-element, 
  .mat-icon-button.mat-primary .mat-ripple-element,
  .mat-tab-label .mat-ripple-element {
    @include variable(background, --primary, $primary, !important);
    opacity: 0.2;
  }
  .mat-button.mat-accent .mat-ripple-element,
  .mat-icon-button.mat-accent .mat-ripple-element,
  .mat-slide-toggle .mat-ripple-element {
    @include variable(background, --accent, $accent, !important);
    opacity: 0.2;
  }
  .mat-button .mat-ripple-element, .mat-raised-button .mat-ripple-element {
    background: rgba(0, 0, 0, .12);
  }
}

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


  .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, 500) !important;
      color: #ffffff !important;
  }
  .mat-color-primary,
  .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, 500) !important;
  }
  .sidebar-panel .mat-nav-list .mat-list-item {
      color: rgba(0, 0, 0, 0.94)
  }
  .sidebar-panel.mat-sidenav .sidebar-list-item.open > .mat-list-item-content > .sub-menu {
      //border-left: 2px solid map-get($md-primary, 500);
      @include variable(border-left, --primary, $primary, !important);
  }
  .sidebar-panel.mat-sidenav {
      background: url('/assets/images/sidebar-bg.jpg') no-repeat;
  }
  .breadcrumb-bar {
      //background: #ffffff !important;
      @include variable(background, --bg2, $bg2, !important);
      @include variable(color, --fg1, $fg1, !important);
  }
  /* Hopscotch Tour */ 
  div.hopscotch-bubble {
      border-color: $primary-dark;
      @include variable(border-color, --primary, $primary);
  }
  /* up arrow  */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow-border {
      border-bottom: 17px solid $primary-dark;
      @include variable(border-bottom-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.up .hopscotch-bubble-arrow {
      border-bottom: 17px solid map-get($md-primary, 500);
      @include variable(border-bottom-color, --primary, $primary);
      top: -16px;
  }
  /* right arrow */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow-border {
      border-left: 17px solid $primary-dark;
      @include variable(border-left-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.right .hopscotch-bubble-arrow {
      border-left: 17px solid map-get($md-primary, 500);
      @include variable(border-left-color, --primary, $primary);
      left: -1px;
  }
  /* bottom arrow */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow-border {
      border-top: 17px solid $primary-dark;
      @include variable(border-top-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.down .hopscotch-bubble-arrow {
      border-top: 17px solid map-get($md-primary, 500);
      @include variable(border-top-color, --primary, $primary);
      top: -18px;
  }
  /* Left Arrow */
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow-border {
      border-right: 17px solid $primary-dark;
      @include variable(border-right-color, --primary, $primary);
  }
  div.hopscotch-bubble .hopscotch-bubble-arrow-container.left .hopscotch-bubble-arrow {
      left: 1px;
      border-right: 17px solid map-get($md-primary, 500);
      @include variable(border-right-color, --primary, $primary);
  }
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
    background-color: map-get($md-accent, 400);
    @include variable(background, --accent, $accent, !important);

  }
  .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
    @include variable(background, --accent, $accent, !important);

  }
  .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: black;
  }
  .mat-bg-warn {
      //background-color: #f44336;
      @include variable(background-color, --red, $red);
      color: white;
  }
  .mat-color-accent {
      //color: map-get($md-accent, 500);
      @include variable(color, --accent, $accent);
  }
  .mat-color-warn {
      //color: #f44336;
      @include variable(color, --warn, $warn);
  }
  .mat-sidenav-container{
    //background-color:#ddd;
    @include variable(background, --bg1, $bg1);
  }

  /////////////////// Typography (egret overrides)

  html,body{
    font-size:13px;
    /* Experimental thin fonts */
    font-weight:250;
  }

  h1,h2,h3,h4,h5,h6{
    font-weight:500;
  }

  h4{
    font-size:15px;
  }

  /////////////////// SpecSelectors: Selectors not originally in ix-blue theme

  .rightside-content-hold{
    //background:linear-gradient(180deg, rgba(255,255,255,0.1), var(--bg1)) !important;
  }

  .mat-tab-label, .mat-tab-link{
    @include variable(color, --fg1, $fg1);
  }
  .mat-menu-item .mat-icon:not([color]),
  .mat-menu-item-submenu-trigger::after{
    @include variable(color, --fg1, $fg1);
  }
  .mat-menu-item .theme-picker-swatch .mat-icon:not([color]){
    @include variable(color, --fg1, $fg1);
    //border:solid 1px #efefef;
    //text-shadow:0 2px 4px;
  }
  .mat-toolbar,
  .mat-raised-button{
    background-color:rgba(0,0,0,0.1);
    @include variable(color, --fg1, $fg1);
  }

  .mat-bg-primary,
  .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-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, 
  //.datatable-header,.datatable-footer,
  .mat-step-header .mat-step-icon,
  div.hopscotch-bubble{
        @include variable(background, --primary, $primary, !important);
        //@include variable(color, #fff, #fff, !important);
        @include variable(color, --primary-txt, $primary-txt, !important);

  }

  .ngx-datatable.material{
    background:none;
  }
  .datatable-header,.datatable-footer{
    border-top-style:solid;
    border-top-width:1px;
    @include variable(border-top-color, --bg1, $bg1, !important);
  }
  .datatable-header,.datatable-footer{
//        @include variable(background, --bg2, $bg2, !important);
//        @include variable(color, --fg2, $fg2, !important);
//        @include variable(background, --primary, $primary, !important);
//        @include variable(color, --primary-txt, $primary-txt, !important);
    @include variable(background, --bg2, $bg2, !important);
    background-color:rgba(0,0,0,0.75)
  }

  .datatable-header-inner,
  div.datatable-row-left,
  div.datatable-row-center,
  div.datatable-row-right,
  .datatable-header-cell{
    height:50px;
  }

  .datatable-header-cell .sort-btn{
    position:absolute;
    top:16px !important;
    right:16px;
    @include variable(color, --fg2, $fg2, !important);
  }

  .datatable-header-cell-label{
    position: relative !important;
    top: 10px !important;
  }

  .datatable-header-cell{
    right: 16px;
    top: 0 !important;
    padding:0px !important;
  }
  .datatable-header-cell:hover{
    border-right:solid 1px ;
    @include variable(border-color, --alt-bg1, $alt-bg1, !important);
  }

  .datatable-header-cell > div{
    height:inherit;
  }

  .ngx-datatable .datatable-header .datatable-header-cell.sortable .datatable-header-cell-wrapper{
    cursor: pointer;
    /* vertical-align: middle; */
    width: inherit;
    height: inherit;
    position: relative;
    top: 0;
    left: 0;
    display: block;
    padding: 3px 16px;
  }

  .mat-bg-accent,
  .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent,
  div.hopscotch-bubble .hopscotch-bubble-number,
  div.hopscotch-bubble .hopscotch-nav-button.next:hover,
  div.hopscotch-bubble .hopscotch-nav-button.next,
  .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a,
  .mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, 
  .mat-checkbox-checked.mat-accent .mat-checkbox-background{
      background-color: map-get($md-accent, 500);
      color: black;
      @include variable(background, --accent, $accent, !important);
      @include variable(color, #000, #000, !important);
  }

  .mat-drawer,
  .sidebar-panel.mat-sidenav .navigation-hold#scroll-area,
  .mat-card,.mat-paginator,
  .mat-button-toggle,
  .mat-select-content, 
  .mat-select-panel-done-animating,
  .mat-expansion-panel,
  .mat-dialog-container,
  .mat-stepper-horizontal, .mat-stepper-vertical,
  .dx-treelist-container{
    @include variable(background, --bg2, $bg2);
    @include variable(color, --fg2, $fg2);
  }
  .mat-button-toggle-checked{
    background-color:rgba(0,0,0,0.1);
    @include variable(color, --fg2, $fg2); 
  }

  .mat-select-panel .mat-option:hover,
  .ngx-datatable .datatable-body .datatable-row-wrapper:nth-child(odd){
    @include variable(background, --alt-bg1, $alt-bg1);
    @include variable(color, --alt-fg1, $alt-fg1);
  }

  .ngx-datatable .datatable-body .datatable-row-wrapper:nth-child(even){
    //@include variable(background, --alt-bg1, $alt-bg1);
    background-color:rgba(123,123,123,0.2);
    @include variable(color, --alt-fg1, $alt-fg1);
  }

  .mat-card .mat-divider{
    @include variable(background, --alt-fg1, $alt-fg1);
    opacity:0.15;
  }

  // System wide hover effects
  .mat-select-panel .mat-option:focus,
  .mat-select-panel .mat-option.mat-selected:not(.mat-option-multiple){ 
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt, !important);
  }

  .mat-menu-content button.mat-menu-item:hover, 
  .mat-menu-content button.mat-menu-item:hover .mat-icon:not([class="theme-picker-swatch-icon"]),
  .ngx-datatable .datatable-body .datatable-row-wrapper:hover,
  .mat-menu-content button.mat-menu-item:focus, 
  .mat-menu-content button.mat-menu-item:focus .mat-icon:not([class="theme-picker-swatch-icon"]),
  .ngx-datatable .datatable-body .datatable-row-wrapper:focus{
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt);
  }

  .dx-treelist-rowsview .dx-selection.dx-row > td, 
  .dx-treelist-rowsview .dx-selection.dx-row:hover > td{
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt);
    border:rgba(0,0,0,0.1)
  }

  .sidebar-panel .mat-nav-list .mat-list-item,
  .app-user .app-user-name, .text-muted,
  .mat-expansion-panel-header-title,
  .mat-expansion-panel-header-description, 

  .mat-list .mat-list-item,
  .mat-paginator-navigation-next, .mat-paginator-navigation-previous,

  .mat-nav-list .mat-list-item, 
  .mat-form-field-label,
  .mat-selection-list .mat-list-item,.mat-option,
  .mat-select-arrow, .mat-select-value {
    @include variable(color, --fg2, $fg2);
  }

  .mat-menu-panel button{
    @include variable(color, --fg2, $fg2);
  }

  .mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
    opacity: 0.38;
  }

  .mat-menu-panel,
  .mat-option.mat-active,
  .mat-nav-list a{
    @include variable(background, --bg2, $bg2);
    @include variable(color, --fg2, $fg2, !important);
  }

  .mat-menu-content{
    @include variable(background, --alt-bg1, $alt-bg1, !important);
    @include variable(color, --fg1, $fg1, !important);
  }

  .mat-form-field-underline{
    @include variable(background-color, --fg2, $fg2);
    opacity:0.35;
  }

  .mat-warn .mat-form-field-underline,
  .mat-focused .mat-form-field-underline{
    opacity:0.85;
  }

#test-alert {
  @include variable(color, --fg2, $fg2);
}

.mat-form-field-ripple{
  @include variable(background-color, --primary, $primary);
}
  .mat-color-primary, 
  .mat-button.mat-primary,
  .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,
  .mat-form-field.mat-focused.mat-primary
  .mat-focused .mat-form-field-label{
    @include variable(color, --primary, $primary, !important);
  }

  .mat-button.mat-accent {
    @include variable(color, --accent, $accent, !important);
  }

  .mat-button:disabled {
    opacity: .38;
  }

  .mat-form-field-ripple{
    @include variable(background-color, --primary, $primary);
  }

  .mat-input-element:disabled{
    opacity:0.38;
    @include variable(color, --fg2, $fg2);
  }

  .mat-calendar-table,
  .mat-calendar-body-cell-content,
  .mat-calendar-body-label{
    @include variable(color, --fg2, $fg2);
  }

  .mat-calendar-table-header,
  .mat-calendar-body-cell,
  .mat-calendar-body-cell-content{
    cursor:default;
  }

  .mat-raised-button.mat-primary[disabled],
  .mat-raised-button.mat-accent[disabled],
  .mat-raised-button.mat-warn[disabled],
  .mat-raised-button[disabled][disabled],
  .mat-fab.mat-primary[disabled],
  .mat-fab.mat-accent[disabled],
  .mat-fab.mat-warn[disabled],
  .mat-fab[disabled][disabled],
  .mat-mini-fab.mat-primary[disabled],
  .mat-mini-fab.mat-accent[disabled],
  .mat-mini-fab.mat-warn[disabled],
  .mat-mini-fab[disabled][disabled]{
    @include variable(background-color, #999, #999);
    opacity:0.38;
  }

  .egret-swatch, .mat-checkbox-frame, .mat-radio-outer-circle { 
    @include variable(border-color, --fg1, $fg1);
    // border-color: gray;
  }

//  .headerCheckBox .mat-checkbox-frame {
//    @include variable(border-color, --primary-txt, $primary-txt);
//  }

  .headerCheckBox .mat-checkbox-frame,
  .ngx-datatable .datatable-body .mat-checkbox-frame {
    @include variable(border-color, --alt-fg1, $alt-fg1, !important);
  }

  .mat-expansion-indicator::after, button.card-close, .mat-pseudo-checkbox {
    @include variable(color, --fg1, $fg1);
  }

  .toggle-children {
    filter: invert(50%);
  }

  .mat-menu-item[disabled] {
    @include variable(color, --primary-txt, $primary-txt);
    opacity: 0.38;
  }

  .spacer{
    flex: 1 1 auto;
  }

  .dynamic-field tooltip{
    @include variable(display, --tooltip, $tooltip);
  }

  // Treelists in storage/volumes
  .mat-expansion-panel-header{
    background-color:rgba(0,0,0,0.1);
  }
  .mat-expansion-panel-body{
    //background-color:rgba(0,0,0,0.15);
    position:relative;
    //padding:0;// ask pete
  }
  .dx-treelist-container{
    background:transparent;
  }
  .dx-treelist-headers{
    border-bottom:none;
  }

  .dx-treelist-rowsview{
    border:0;
  }

  .dx-treelist .dx-column-lines> td{
    border-left:solid 1px rgba(128,128,128,0.1);
    border-right:none;
  }

  .dx-treelist .dx-row-lines > td{
    border-color: rgba(128,128,128,0.1);
  }

  tr.dx-row:nth-child(odd){
    background-color:rgba(0,0,0,0.05)
  }

  // END Treelist styles

  //Entity Module Overrides

  entity-task .form-card.mat-card,
  device-edit .form-card.mat-card,
  entity-form .form-card.mat-card{
    max-width:960px;
    margin:0 auto;
  }

  .form-card.mat-card{
    font-size:12px;
  }

  .fieldset-label{
    min-width:100%;
    margin-bottom:16px;
  }

  .combo-box-menu.mat-menu-panel {
      max-height: 256px;
  }

  .mat-checkbox-inner-container{
    width:16px;
    height:16px;
    margin:4px;
    overflow: visible;
  }
  .mat-checkbox-ripple{
    left:-17px;
    top:-17px;
  }
  /////////////////// END SpecSelectors

  .mat-dialog-title {
    .warning-icon {
      color: #ffc107;
      position: relative;
      top: 8px;
      font-size: 35px;
      margin-right: 10px;
    }
  }
  
  .mat-dialog-content {
    max-width: 600px;
    padding-bottom: -3px;
    overflow: hidden;
  
    .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 );
      }
    }
  }

  // To move tooltips up when they appear too low on viewport
  #raised-tooltip {
    top: -90px;
  }

  // To fix alignment issues w/checkboxes on Create Pool page
  .headerCheckBox {
    position: relative;
    left: 2px;
    margin-top: 9px;
  }

  // For Detach Pools functions on volumes-list.component.ts
  #pool_detach_warning {
    margin-bottom: 15px;
  }

  #cust_button_download_key {
    @include variable(background-color, --red, $red);
    color: white;
    margin-right: 7px;
  }
  // ------------------------

  // For some items on VM Wizard Hard Disks page
  #disk_radio {
    max-width: 220px;
  }

  #disk_radio tooltip {
    float: right;
    margin-top: 23px;
  }
  // ---------------

  // Vertically align header-footer items on datatables  
  .datatable-header-cell {
    position: relative;
    top: -5px;
    left: 14px;
  }

  // Put header labels directly over cells
  .datatable-header-cell-label {
    margin-left: -7px;
    text-align: center;
    position: relative;
    top: 10px;
  }

  // Resizes loader dialog which appears on update, wipe disk, etc.
  .entity-job-dialog {
    min-width: 200px;
    max-width: 500px;
    max-height: 300px; 
  }

  // Fix bug where ngx-datatable rows get stuck at original window width
  .datatable-scroll {
    min-width: 100%;
  }

  // Style the ix logo with the primary theme color
  .ix-logo {
    @include variable(fill, --primary, $primary);
  }

  // Color the small lock icon with theme colors
  .app-user-name .icon-xs {
    @include variable(color, --fg2, $fg2, !important);
  }

  .mat-spinner circle {
      @include variable(stroke, --primary, $primary, !important);
  }

  // Add a visual effect when any sidenav menu item is clicked
  .highlight  {
    opacity: 0.5;
  }

  // Add rule for entity wizards to make text light on dark themes
  .mat-step-header .mat-step-label.mat-step-label-active, {
    @include variable(color, --fg2, $fg2);
    opacity: 1;
  }

  .mat-step-header .mat-step-label {
    @include variable(color, --fg2, $fg2);
    opacity: .38;
  }

  // Style file trees to be highlighted with a theme color
  .node-content-wrapper:hover,
  .node-content-wrapper-focused{
      @include variable(background, --bg1, $bg1);
  }

  // Give vdev arrow buttons theme colors
  .vdev-action-btn {
    @include variable(background, --bg1, $bg1);
  }

  .vdev-action-btn .arrow {
    @include variable(color, --primary, $primary);
  }

  .vdev-action-btn:disabled {
    opacity: 0.38;
  }

  // style nav chevrons on datatable pager w/regard to theme
  .mat-button-wrapper .mat-paginator-decrement,
  .mat-button-wrapper .mat-paginator-increment {
    @include variable(border-color, --fg1, $fg1);
  } 

  .mat-icon-button:disabled .mat-button-wrapper .mat-paginator-decrement,
  .mat-icon-button:disabled .mat-button-wrapper .mat-paginator-increment {
    @include variable(border-color, --fg1, $fg1);
    opacity: .38;
  } 

  // style to make sure all radio buttons catch the theme color
  .mat-radio-button.mat-accent .mat-radio-inner-circle {
    @include variable(background-color, --accent, $accent !important);
  }

  .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    @include variable(border-color, --accent, $accent !important);
  }

  // Fix icon color in notification area
  .notific-icon {
    @include variable(color, --primary, $primary !important);
  }

  .mat-spinner circle {
    @include variable(stroke, --primary, $primary, !important);
  } 

  // Align button and tooltip on Add Replication form
  #repl_remote_hostkey button {
    left: 17px;
  }

  #repl_remote_hostkey .tooltip {
    left: 145px;
    top: -55px
  }

  // Theme color for slider (Shell page and elsewhere)
  .mat-slider {
    @include variable(color, --accent, $accent, !important);
  }

  .mat-slider-track-fill, .mat-slider-thumb {
    @include variable(background-color, --accent, $accent, !important);
  }

  // Fix a layout problem on Sharing/ISCSI page with ink-bar under active link...
  iscsi .mat-tab-label-active, reportsdashboard .mat-tab-label-active  {
    border-bottom: 2px solid;
    @include variable(border-color, --primary, $primary);
  }

  //...by hiding ink bar, replacing it with a bottom border, above.
  iscsi .mat-ink-bar, reportsdashboard .mat-ink-bar {
    opacity: 0;
  }

  // Properly align buttons on Dir Services / Idmap
  #idmap-actions {
    margin-left: 0;
  }

  // Adjustment of highlight over page number on pager in footer
  .ngx-datatable .datatable-footer .datatable-pager .pager .pages.active a {
    padding-top: 1px;
  }

  // Background visually links the items in the form-explorer 
  .form-ex-flex-container {
    @include variable(background, --bg1, $bg1);
  }

  // Fill in space above horz scrollbar on entity tables
  .datatable-body {
    //@include variable(background-color, --alt-bg1, $alt-bg1);

  }

  // Align buttons on UI Prefs form
  .prefs-form .mat-card-actions {
    text-align: left !important;
    padding-left: 10px;
  }

  // Keeps buttons on UI prefs form from overflowing page
  @media (min-width: 600px) and (max-width:740px) {
    .prefs-form button {
      display: block;
      margin-bottom: 10px !important;
    }
  }

  // Adds space above Manage Themes section in 1 col view on UI Pref
  @media (max-width: 599px) {
    custom-theme-manager-form {
      margin-top: 30px !important;
    }
  }

  // Helper styles for red,blue,green,cyan,orange,magenta,violet,yellow
  // The --color-txt css vars are generated by theme service
  .fn-theme-primary{
    @include variable(background-color, --primary, $primary);
    @include variable(color, --primary-txt, $primary-txt);
  }
  .fn-theme-red{
    @include variable(background-color, --red, $red);
    @include variable(color, --red-txt, $red-txt);
  }
  .fn-theme-blue{
    @include variable(background-color, --blue, $blue);
    @include variable(color, --blue-txt, $blue-txt);
  }
  .fn-theme-green{
    @include variable(background-color, --green, $green);
    @include variable(color, --green-txt, $green-txt);
  }
  .fn-theme-cyan{
    @include variable(background-color, --cyan, $cyan);
    @include variable(color, --cyan-txt, $cyan-txt);
  }
  .fn-theme-orange{
    @include variable(background-color, --orange, $orange);
    @include variable(color, --orange-txt, $orange-txt);
  }
  .fn-theme-magenta{
    @include variable(background-color, --magenta, $magenta);
    @include variable(color, --magenta-txt, $magenta-txt);
  }
  .fn-theme-violet{
    @include variable(background-color, --violet, $violet);
    @include variable(color, --violet-txt, $violet-txt);
  }
  .fn-theme-yellow{
    @include variable(background-color, --yellow, $yellow);
    @include variable(color, --yellow-txt, $yellow-txt);
  }

  // Fixes color on Reports page tabs
  #dashboardcontainerdiv .mat-ink-bar {
    @include variable(background-color, --primary, $primary);
  }

  .mat-button {
    text-transform: uppercase !important;
    font-weight: 500 !important;
  }

 .mat-button.mat-basic, .mat-button.mat-primary {
    @include variable(background-color, --primary, $primary);
    color: white !important;
  }

  .mat-button.mat-accent {
    @include variable(background-color, --accent, $accent);
    color: black !important;
  }

  // Gets checkboxes in SMART tests to pick up theme color
  .mat-primary .mat-pseudo-checkbox-checked, .mat-primary .mat-pseudo-checkbox-indeterminate {
    @include variable(background, --accent, $accent !important);
  }

  .mat-pseudo-checkbox{
    display:none ;
  }

  .mat-option .fn-checked,
  .mat-option .fn-unchecked{
    position:relative;
    top:6px;
  }

  // Bring tooltips to the front in dialogs
  .mat-dialog-container, .mat-dialog-content {
      overflow: visible !important;
  }

  // Fix for overscrolling problem with sidenav
  .sidebar-panel.mat-sidenav .navigation-hold {
    position: static !important;
  }

  .mat-drawer {
    overflow-y: hidden !important;
  }

  // Bring theme colors to rollover effect for standard primary buttons
  .mat-button.mat-primary:hover .mat-button-focus-overlay {
    @include variable(background-color, --primary, $primary);
    opacity: .12;
  }

  // Bring theme colors to rollover effect for standard accent buttons
  .mat-button.mat-accent:hover .mat-button-focus-overlay {
    @include variable(background-color, --accent, $accent);
    opacity: .12;
  }

  // Bring theme color to tab underline on Theme Preview
  #theme-preview .mat-ink-bar {
    @include variable(background-color, --primary, $primary !important);
  }

  // Bring theme color to small icon buttons
  .mat-icon-button.mat-primary {
    @include variable(color, --primary, $primary !important);  
  }

  .mat-icon-button.mat-accent,
  .mat-icon.mat-accent{
    @include variable(color, --accent, $accent !important);  
  }

  // Make room for checkbox ripple effect in datatables
  .datatable-header-cell .mat-checkbox, .datatable-body-cell .mat-checkbox {
    margin-left: 5px;
  }

  // Adjustments to checkboxes and header labels on unique tables
  services .datatable-body-cell .mat-checkbox {
    bottom: 7px !important;
  }

  services .datatable-header-cell, app-vm-list .datatable-header-cell {
    top: 6px;
  }


  .red-warning-button {
    @include variable(background-color, --red, $red !important);
    color: white;
  }

  // // Define logo via CSS properties
  // .logo{
  //  /*   @include variable(background-image, --logo, $logo !important); //url(assets/images/logo.svg);
  //     background-size: contain;
  //     width: 52px;
  //     height: 48px;
  //     background-repeat: no-repeat;
  //     background-position: 0 4px;
  //     left: -6px;
  //     position: relative;*/
  // }
  // .logo-text{
  //    /* @include variable(background-image, --logo-text, $logo-text !important); //url(assets/images/logo-text.svg);
  //     width: 112px;
  //     height: 40px;
  //     position: relative;
  //     top: 0;
  //     background-size: contain;
  //     background-repeat: no-repeat;
  //     background-position: 2px 0;*/
  // }

  .mat-progress-bar-fill::after {
    @include variable(background-color, --primary, $primary);
  }

  .mat-progress-bar-buffer {
    @include variable(background-color, --primary, $primary);
    opacity: 0.5;
  }

  #password, #sed_passwd, #em_pass1, #bsdusr_passwd_currnt,
    #Passphrase, #passphrase, #disk_passwd, #ldap_bindpw, #iscsi_target_auth_secret,
      #iscsi_target_auth_peersecret, #dc_passwd, #secret_key, #ad_bindpw, #v3_password,
      #secret_access_key-S3, #v3_privpassphrase, #secret_access_key-S3, #pass-FTP, 
      #pass-MEGA, #pass-SFTP, #pass-WEBDAV, #aws_secret_access_key {
    max-width: 640px;
    min-width: 225px;
  }
  #password_conf, #bsdusr_password_conf, #sed_passwd2, #em_pass2,
    #Passphrase2, #passphrase2, #disk_passwd2, #iscsi_target_auth_secret_confirm,
      #iscsi_target_auth_peersecret_confirm, #password2, #dc_passwd2, #secret_key2, #v3_password2,
      #v3_privpassphrase2 {
    width: 70%;
    max-width: 450px;
  }

  #bsdusr_password {
    width: 70%;
    max-width: 475px;
    min-width: 225px;
  }

  app-createpassphrase-form .has-tooltip {
    width: 100% !important;
    max-width: 450px !important;
  }

  .has-pwtoggle > mat-input-container {
    width: 70% !important;
  }

  app-entity-dialog .has-pwtoggle  {
    padding: 0 0 10px 0 !important;
    width: 385px !important;
    background: rgba(0, 0, 0, 0) !important;

    mat-input-container {
      width: 86.3% !important;
    }
  }

  #secret_key2 {
    margin-bottom: 5px;
  }

  #toggle_pw {
    @include variable(display, --toggle_pw_display_prop, $toggle_pw_display_prop);
  }

  datatable-selection > .empty-row {
    color: var(--alt-fg1);
  }

  #toggle_pw {
    @include variable(display, --toggle_pw_display_prop, $toggle_pw_display_prop);
  }

  #show_Warning {
    @include variable(display, --enableWarning, $enableWarning);
  }

  #update-info {
    color: var(--accent);
  }

  .services-table .service-toggle-running {
    @include variable(fill, --accent, $accent);
  }

  .mat-simple-snackbar-action {
    color: var(--accent);
  }

  input[type=number] {
    -moz-appearance: textfield !important;
  }

  input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  
  .mat-autocomplete-panel .mat-option-text {
    @include variable(color, --fg2, $fg2 !important);
  }

 .ui-treetable tr:nth-child(even){
    background-color:rgba(123,123,123,0.2);
  }
  
  .ui-treetable tr:hover {
    @include variable(background, --primary, $primary, !important);
    @include variable(color, --primary-txt, $primary-txt);
  }

  .ui-treetable-thead {
    text-align: left;
  }

  app-volumes-list .ui-treetable-resizable .ui-treetable-tfoot>tr>td, .ui-treetable-resizable .ui-treetable-tbody>tr>td {
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
  }

  app-volumes-list td[id^="tbody__comments_"] {
    white-space: normal !important;
    text-overflow: unset;
    min-width: 200px;
  }

} // end of ix theme
