@use '@angular/material' as mat;
@import '@angular/material';

// Sidebar mixin
// Use theme to manage colors on sidebar component
@mixin mic-sidebar-override($theme) {
  $primary: map-get($theme, primary);
  $background: map-get($theme, background);
  $is-dark: map-get($theme, is-dark);

  $backgroundColor: map-get($background, menu);
  $primaryBackgroundColor: map-get($primary, A400);
  $childrenBackgroundColor: map-get($background, sub-menu);
  @if $is-dark {
    $primaryBackgroundColor: map-get($mic-grey, 600);
  }

  $borderColor: rgba(0, 0, 0, 0.12);
  @if $is-dark {
    $borderColor: rgba(255, 255, 255, 0.12);
  }

  $textColor: map-get($mic-grey, 500);
  @if $is-dark {
    $textColor: mat.m2-get-contrast-color-from-palette($primary, A400);
    .mat-sidenav-container {
      background-color: map-get($mic-grey, 900);
    }
  }

  .mic-sidebar {
    // White sidebar
    .white {
      background-color: $backgroundColor;
    }

    // Primary sidebar
    .primary {
      background-color: $primaryBackgroundColor;
      .mic-sidebar-item {
        padding-bottom: 2px;
        .mic-menu-expansion-panel {
          &.active {
            .mat-expansion-panel-header {
              border-color: $mic-brand-colors-white;
              background-color: map-get($primary, A300);
              color: $mic-brand-colors-white;
              @if $is-dark {
                background-color: map-get($mic-grey, A600);
              }
            }
          }

          &.white {
            .mic-menu-expansion-panel-title {
              * {
                &.primary {
                  color: mat.m2-get-contrast-color-from-palette($primary, A400);
                }
              }
            }
          }
        }
      }
    }

    .mic-sidebar-item {
      padding-bottom: 2px;
      .mat-expansion-panel-body {
        a {
          margin-bottom: 4px;
        }
      }
      a {
        color: $textColor;
        @if $is-dark {
          margin-bottom: 2px;
        }
        &.primary {
          color: map-get($mic-grey, A100);
        }
        &:not(.primary) {
          border-right: 5px solid transparent;
        }
        &:hover {
          &:not(.primary) {
            @if $is-dark {
              background-color: map-get($mic-grey, 600);
            } @else {
              background-color: map-get($mic-grey, 100);
            }
            span,
            mat-icon {
              color: map-get($primary, A400);
            }
          }
          &.primary {
            background-color: map-get($primary, A300);
            @if $is-dark {
              background-color: map-get($mic-grey, A600);
            }
            span,
            mat-icon {
              color: $mic-brand-colors-white;
            }
          }
        }

        &:focus {
          &:not(.primary) {
            border-right: map-get($primary, A400) solid 5px;
          }
          &.primary {
            box-shadow: inset -5px 0px 0px 0px white;
          }
        }

        // submenu item
        &.active {
          &:not(.primary) {
            background-color: map-get($mic-grey, 100);
            color: map-get($primary, A400);
            @if $is-dark {
              background-color: map-get($mic-grey, 600);
            }
          }
          &.primary {
            background-color: map-get($primary, A300);
            @if $is-dark {
              background-color: map-get($mic-grey, A600);
            }
            color: mat.m2-get-contrast-color-from-palette($primary, A400);
          }
        }

        &.closely {
          &.primary {
            color: mat.m2-get-contrast-color-from-palette($primary, A400);

            &.rtl,
            &.ltr {
              border-color: $primaryBackgroundColor;
            }
          }

          &.active {
            &.white {
              background-color: map-get($primary, 50);
              @if $is-dark {
                background-color: map-get($mic-grey, A600);
              }
            }

            span {
              color: map-get($primary, A400);
            }

            &.rtl,
            &.ltr {
              border-color: map-get($primary, A400);
              mat-icon {
                color: map-get($primary, A400);
              }
            }

            &.primary {
              background-color: map-get($primary, A300);
              span,
              mat-icon {
                color: mat.m2-get-contrast-color-from-palette($primary, A400);
              }

              &.rtl,
              &.ltr {
                border-color: mat.m2-get-contrast-color-from-palette($primary, A400);
              }
            }
          }
        }
      }

      .mic-menu-expansion-panel {
        box-shadow: none;

        .mic-menu-expansion-panel-title:hover {
          color: $primaryBackgroundColor;
        }

        &.active {
          .mat-expansion-panel-header {
            border-left: 5px solid;
            background-color: map-get($primary, 50);
            border-color: map-get($primary, A400);
            color: map-get($primary, A400);
            @if $is-dark {
              background-color: map-get($mic-grey, 500);
            }
          }

          &.white {
            .mic-menu-expansion-panel-title {
              * {
                color: map-get($primary, A400);
              }
            }
          }
        }

        &.white {
          .mic-menu-expansion-panel-title {
            * {
              @if $is-dark {
                color: mat.m2-get-contrast-color-from-palette($primary, A400);
              } @else {
                color: map-get($mic-grey, 500);
              }
            }
          }

          .mat-expansion-panel-header {
            &:hover:not(.active) {
              @if $is-dark {
                background-color: map-get($mic-grey, 600);
              } @else {
                background-color: map-get($mic-grey, 100);
              }

              * {
                color: map-get($primary, A400);
              }
            }

            &:focus {
              border: map-get($primary, A400) solid 2px;
            }
          }
        }

        &.primary {
          background-color: $primaryBackgroundColor;

          .mat-expansion-indicator::after {
            color: mat.m2-get-contrast-color-from-palette($primary, A400);
          }

          .mat-expansion-panel-header {
            &:hover:not(.active) {
              background-color: map-get($primary, A300);
              @if $is-dark {
                background-color: map-get($mic-grey, A600);
              }

              * {
                color: $mic-brand-colors-white;
              }
            }

            &:focus {
              border: white solid 2px;
            }
          }

          .mic-menu-expansion-panel-title {
            * {
              color: mat.m2-get-contrast-color-from-palette($primary, A400);
            }
          }
        }
      }
    }

    .sidebar-children-level {
      background-color: $childrenBackgroundColor;
      mat-tree {
        background-color: $childrenBackgroundColor;
        .mat-tree-node,
        .mat-nested-tree-node {
          @if $is-dark {
            color: $textColor;
          } @else {
            color: $mic-text-colors-normal;
          }
        }
      }

      &.collapse-link {
        padding: 0 10px;
        overflow: hidden;
        border-color: $borderColor;
      }

      &.ltr {
        border-left: solid 1px $borderColor;
      }

      &.rtl {
        border-right: solid 1px $borderColor;
      }

      .navbar-header {
        * {
          color: map-get($primary, A400);
        }
      }
    }
  }
}
