@use "sass:map";
@use '~@angular/material' as mat;

@import "sidebar-content/sidebar-content.theme";
@import "sidebar-header/sidebar-header.theme";
@import "sidebar-collapse/sidebar-collapse.theme";


@mixin sidebar-theme($theme, $typo: (), $reverse: false, $overrides: ()) {
  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  $sidebar-values: (
          sidebar-background: mat.get-color-from-palette($ascent, 200, 0.4),
          divider-background: mat.get-color-from-palette($primary, 700),
          sidebar-minimized-width: 4rem,
          width: 100%
  );


  $sidebar-values: map.merge($sidebar-values, $overrides);

  @if ($reverse) {
    $primary: map-get($config, accent);
    $ascent: map-get($config, primary);

    $config: map.set($config, primary, $primary);
    $config: map.set($config, ascent, $ascent);
  }

  ql-sidebar {
    @include extract-style-map($sidebar-values);

    width: var(--width);

    &.is-collapsed {
      width: map.get($sidebar-values, sidebar-minimized-width);
    }

    background-color: map.get($sidebar-values, sidebar-background);

    .divider {
      background-color: map.get($sidebar-values, divider-background);
    }

    ql-sidebar-collapse {
      @if ($typo) {
        font-size: mat.font-size($typo, body-1);
        font-family: mat.font-family($typo);
      }
      color: mat.get-color-from-palette($primary, 700);
      fill: mat.get-color-from-palette($primary, 700);

      @include ql-sidebar-collapse-theme($config, $sidebar-values);
    }

    @include ql-sidebar-content-theme($config, $typo, $sidebar-values);
    @include ql-sidebar-header-theme($config);
  }

}