@use '@angular/material' as mat;

@mixin sc-documents-manager-viewer-theme($theme) {
  $primary: map-get($theme, primary);
  $danger: map-get($theme, danger);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $is-dark-theme: map-get($theme, is-dark);

  $active-background-color: if($is-dark-theme, rgba(255,255,255,.12), rgba(0,0,0,.12));

  .sc-documents-manager-viewer {
    // .nav-list {
    //   &__item {
    //     // link style reset
    //     color: mat-color($foreground, text) !important;

    //     &:focus:not(.--active),
    //     &:hover:not(.--active),
    //     :focus-visible:not(.--active) {
    //       color: mat-color($foreground, text) !important;
    //       background-color: mat-color($background, hover)!important;
    //       outline: none; 
    //     }

    //     &:active,
    //     &.--active {
    //       color: mat-color($foreground, text) !important;
    //       background-color: $active-background-color !important;
    //       outline: none; 
    //     }
    //   }
    // }

    .mat-list-option:not(.--active) {
      background-color: transparent;

      &:focus {
        background-color: mat.get-color-from-palette($background, hover);
      }

      &:active,
      &.--active {
        background-color: $active-background-color;
      }
    }
  }
}