@use '@angular/material' as mat;
@import "src/assets/styles/responsive-base.scss";

@mixin nano-manager-mat($theme) {
  $color-config: mat-get-color-config($theme);
  $primary-color: mat.get-color-from-palette(map-get($color-config, primary));

  app-nano-manager #nano-client-side-panel {
    background-color: map-get($theme, sidebar);

    .selected{
      background-color: map-get($theme, resource-content);
    }

    @include screen('phone'){
      filter: drop-shadow(-2px 0 1px map-get($theme, shadow));
    }

    .etalonSlot{
      color: $primary-color;
    }
  }

  app-nano-manager{
    /* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
    .mat-checkbox-layout{
      white-space: normal;
    }
  }

  app-nano-manager .drive-row{
    border-top: 1px solid map-get($theme, sidebar-bg);

    .mdi, .drive-room-new-row{
      color: $primary-color;
    }
  }

  app-nano-manager .drive-new{
    border-top: 1px solid map-get($theme, sidebar-bg);
    color: $primary-color;
  }
}
