@use 'sass:map';
@use '../../../mx-core/src/base/colors';
@use '../../../mx-core/src/base/opacity';

@mixin mx-side-nav-theme($theme) {
  $is-dark: map.get($theme, is-dark);
  $color-theme: colors.$mx-light;

  @if $is-dark {
    $color-theme: colors.$mx-dark;
  }

  .mx-side-nav-wrapper {
    background-color: map.get($color-theme, surfaceContainerHigh);

    .mx-side-nav-selector {
      &:hover {
        background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
      }
    }
  }

  .mx-side-nav-node {
    &:not(.mx-side-nav-node):hover {
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
    }

    &__item {
      .node-icon {
        color: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);
      }

      .node-expand-icon {
        color: map.get($color-theme, onSurfaceVariant);
      }

      .node-name {
        color: map.get($color-theme, onSurfaceVariant);
      }
    }

    &[category] {
      .node-name {
        color: map.get($color-theme, onSurfaceVariant);
      }
    }

    &[group] {
      &.is-active {
        .node-name {
          color: map.get($color-theme, primary);
        }
        .node-icon {
          color: map.get($color-theme, primary);
        }
      }
    }

    &[route] {
      &.is-active {
        &::before {
          background-color: map.get($color-theme, primary);
        }
        background-color: rgba(map.get($color-theme, primary), opacity.$opacity-12);
        .node-name {
          color: map.get($color-theme, primary);
        }
        .node-icon {
          color: map.get($color-theme, primary);
        }
      }
    }
  }

  .mx-side-nav-node {
    &::after {
      background-color: map.get($color-theme, outlineVariant);
    }
  }

  .mx-side-nav-select {
    &:hover {
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-8);
    }
    &:active {
      background-color: rgba(map.get($color-theme, onSurface), opacity.$opacity-12);
    }

    &__name {
      color: map.get($color-theme, onSurface);
    }

    .mat-icon {
      color: map.get($color-theme, onSurfaceVariant);
    }
  }

  .not-found-box {
    mat-icon {
      fill: rgba(map.get($color-theme, onSurfaceVariant), opacity.$opacity-12);
    }
    span {
      color: rgba(map.get($color-theme, onSurface), opacity.$opacity-38);
    }
  }
}