@use '@angular/material' as mat;
@mixin sc-sidenav-theme($theme) {
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);
  $primary: map-get($theme, primary);
  $danger: map-get($theme, danger);

  //
  // CIRCLE IMAGES
  //

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

  //
  // DETAILS OVERVIEW (OV) DETAILS PAGE
  //

  .layout-ov-page {
    .ov-header {
      &__text {
        text-align: center;

        .mat-caption {
          color: mat.get-color-from-palette($foreground, secondary-text);
          text-transform: uppercase;
        }
      }
    }

    .mat-list-item-active,
    .mat-list-item-active:hover,
    .mat-list-item-active:focus {
      background: mat.get-color-from-palette($primary, default);
      cursor: initial;

      .ov-nav__list-item-title,
      .ov-nav__list-item-subtitle,
      .ov-nav__nav-item-icon {
        color: mat.get-color-from-palette($primary, '500-contrast') !important;
      }
    }

    .mat-list-item.--subtitle-danger {
      .ov-nav {
        &__list-item-subtitle {
          color: mat.get-color-from-palette($danger, 500);
        }
      }
    }

    .ov-nav {
      &__nav-item-icon {
        color: mat.get-color-from-palette($foreground, secondary-text);
      }

      &__list-item-title,
      &__list-item-subtitle {
        color: mat.get-color-from-palette($foreground, secondary-text);
      }

      .mat-list-item:hover:not(.mat-list-item-active) {
        .ov-nav__list-item-title {
          color: mat.get-color-from-palette($foreground, text);
        }

        .ov-nav__nav-item-icon {
          color: mat.get-color-from-palette($primary, default) !important;
        }
      }
    }
  }
}