@use '@angular/material' as mat;
@mixin sc-shell-theme($theme) {
    // Extract the palettes you need from the theme definition.
    $primary: map-get($theme, primary);
    $accent: map-get($theme, accent);
    $foreground: map-get($theme, foreground);
    $background: map-get($theme, background);
    $scForeground: map-get($theme, sc-foreground);
    $scBackground: map-get($theme, sc-background);
    $is-dark-theme: map-get($theme, is-dark);
  
    .nav {
      &__section-title {
        color: map-get($scForeground, nav-section-title);
      }
  
      &__section-seperator {
        background-color: mat.get-color-from-palette($foreground, divider);
        // color: mat-color($foreground, divider);
      }
  
      &__leading-icon {
        color: map-get($scForeground, nav-leading-icon);
      }
  
      &__trailing-icon {
        color: map-get($scForeground, nav-trailing-icon);
      }
  
      &__link {
        color: map-get($scForeground, nav-link);
      }
  
      // Nav items coloring
      &__link--active {
        color: mat.get-contrast-color-from-palette($primary, 500) !important;
        background-color: mat.get-color-from-palette($primary, 500) !important;
  
        .nav__leading-icon {
          color: mat.get-contrast-color-from-palette($primary, 500);
        }
  
        .nav__trailing-icon {
          color: map-get($scForeground, nav-trailing-icon);
        }
      }
  
      &__link:hover {
        color: map-get($scForeground, nav-link-hover);
        background-color: map-get($scBackground, nav-link-hover);
  
        .nav__leading-icon {
          color: mat.get-color-from-palette($primary, "default");
        }
  
        .nav__trailing-icon {
          color: map-get($scForeground, nav-trailing-icon-hover);
        }
      }
  
      &__link--active:hover {
        color: mat.get-contrast-color-from-palette($primary, 500);
        background-color: mat.get-color-from-palette($primary, "default");
  
        .nav__leading-icon {
          color: mat.get-contrast-color-from-palette($primary, 500);
        }
  
        .nav__trailing-icon {
          color: map-get($scForeground, nav-trailing-icon-active-hover);
        }
      }
  
      // Sublist nav items coloring
      &__list-item--expanded {
        background-color: map-get($scBackground, nav-list-expanded-background);
  
        .nav__link--expanded {
          color: map-get($scForeground, nav-list-expanded-link-expanded);
          background-color: map-get($scBackground, nav-list-expanded-link-expanded);
  
          .nav__leading-icon {
            color: map-get($scForeground, nav-list-expanded-leading-icon);
          }
  
          .nav__trailing-icon {
            color: map-get($scForeground, nav-list-expanded-trailing-icon);
          }
  
          &:hover {
            color: map-get($scForeground, nav-list-expanded-link-expanded-hover);
            background-color: map-get($scBackground, nav-list-expanded-link-expanded-hover);
  
            .nav__leading-icon {
              color: mat.get-color-from-palette($primary, 500);
            }
  
            .nav__trailing-icon {
              color: map-get($scForeground, nav-list-expanded-trailing-icon-hover);
            }
          }
        }
      }
    }
  
    .layout {
      &__sidebar {
        background-color: mat.get-color-from-palette($background, card);
        border-color: mat.get-color-from-palette($foreground, divider);
      }
  
      &__topbar {
        background-color: mat.get-color-from-palette($background, card);
        border-color: mat.get-color-from-palette($foreground, divider);
      }
  
      &__actionbar {
        background-color: mat.get-color-from-palette($background, card);
      }
    }
  
    .topbar {
      &__search {
        border-color: mat.get-color-from-palette($foreground, divider);
  
        .mat-input-element {
          color: mat.get-color-from-palette($foreground, secondary-text);
        }
  
        .mat-form-field-underline {
          background-color: transparent;
        }
  
        .mat-form-field-prefix {
          color: mat.get-color-from-palette($foreground, secondary-text);
        }
  
        .mat-focused {
          .mat-input-element {
            color: mat.get-color-from-palette($foreground, text) !important;
          }
  
          .mat-form-field-prefix {
            color: mat.get-color-from-palette($primary, 500);
          }
        }
      }
  
      &__actions {
        border-color: mat.get-color-from-palette($foreground, divider);
  
        .mat-button-base {
          color: mat.get-color-from-palette($accent, 400);
  
          &:hover {
            color: mat.get-color-from-palette($primary, 500);
          }
        }
      }
  
      &__client {
        &-icon {
          color: mat.get-color-from-palette($accent, 400);
        }
  
        &-text {
          color: mat.get-color-from-palette($foreground, secondary-text);
        }
  
        &-name {
          font-weight: 500;
          font-size: 14px;
          line-height: 18px;
        }
  
        &-location {
          font-weight: 400;
          font-size: 12px;
          line-height: 16px;
          text-transform: uppercase;
          letter-spacing: 0.033333333rem;
        }
  
        &:hover {
          background: mat.get-color-from-palette($background, hover);
  
          .topbar__client-icon {
            color: mat.get-color-from-palette($primary, default);
          }
  
          .topbar__client-text {
            color: mat.get-color-from-palette($foreground, text);
          }
        }
      }
    }
  
    .sidebar {
      &__btn-toggle-wide {
        color: map-get($scForeground, nav-trailing-icon);
  
        &:hover {
          color: map-get($scForeground, nav-trailing-icon-hover);
        }
      }
  
      &__nav {
        border-color: mat.get-color-from-palette($foreground, divider);
      }

      &__brand {
        &--light {
          display: if($is-dark-theme, none, block);
        }

        &--dark {
          display: if($is-dark-theme, block, none);
        }
      }
    }
  
    // MOBILE NAV
  
    .layout__wrapper--mobile-nav-expanded {
      .sidebar__btn-close-mobile-nav {
        color: mat.get-color-from-palette($foreground, secondary-text);
  
        &:hover {
          color: mat.get-color-from-palette($foreground, text);
        }
      }
    }
  
    // SIDEBAR — COLLAPSED
    //
    // INITIAL STATE. SIDEBAR MOSTLY OFF CANVAS (EXCEPT ICONS) AND HAS NO ELEVATION.
  
    .layout__wrapper--sidebar-collapsed {
      .layout__sidebar {
        border-color: mat.get-color-from-palette($foreground, divider);
      }
    }
  
    // SIDEBAR — HOVER
    //
    // STATE: MOUSE HOVERING OVER SIDEBAR. SIDEBAR FLOATS IN AND RISES ELEVATION LEVEL
  
    .layout__wrapper--sidebar-hover:not(.layout__wrapper--mobile-nav-expanded) {
      .layout {
        &__sidebar {
          // @include mat-elevation-transition;
          // @include mat-elevation(24);
        }
      }
    }
  }