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

@import "./sidebar-group/sidebar-group.theme";
@import "sidebar-content.shared.theme";
@import "../../common/base-styles.theme";

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

  $content-values: (
          group-child-padding: 3.2rem,
          group-arrow-position: 'end',
          group-row-space-between: .4rem,
          group-open-background-color: mat.get-color-from-palette($primary, 200, 0.1),
          selected-border-color: mat.get-color-from-palette($primary),
          item-padding: 0 0 0 5%,
          item-selected-border-width: .4rem,
          item-selected-background-color: mat.get-color-from-palette($primary, A100, 0.4),
          row-height: 4rem,
          row-width: inherit,
          row-group-width: 100%
  );

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

  ql-sidebar-content {

    @include extract-style-map($content-values);
    @include ql-sidebar-group-theme($theme, $typo, $content-values);

    box-sizing: border-box;
    display: flex;
    flex-flow: column wrap;


    ql-sidebar-group {
      width: map.get($content-values, row-group-width);
      margin-bottom: map.get($content-values, group-row-space-between);
      order: var(--order);

      .group-row {
        grid-template-areas: "text arrow";
        grid-template-columns: .8fr .2fr;

        &.always-open {
          grid-template-areas: "text";
          grid-template-columns: 1fr;
        }
      }

      @if (map.get($content-values, group-arrow-position) == 'start') {
        &.has-icon {
          .group-row {
            grid-template-areas: "arrow text icon"
          }
        }
      }

      ql-sidebar-item {
        @include sidebar-content-item($theme, $typo, $content-values);

        width: map.get($content-values, row-width);
        padding-left: map.get($content-values, group-child-padding);

        &.is-collapsed {
          padding-left: 0;
        }
      }

      .group-row {
        &:hover {
          @include hover-item($ascent);
        }
      }
    }

    ql-sidebar-item {
      @include sidebar-content-item($theme, $typo, $content-values)
    }
  }
}