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

@import "../../common/base-styles.theme";

@mixin ql-sidebar-header-theme($theme, $overrides: ()) {

  $config: mat.get-color-config($theme);
  $primary: map-get($config, primary);
  $ascent: map-get($config, accent);
  $warn: map-get($config, warn);

  $content-values: (
      sidebar-header-height: 4.2rem
  );

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


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

    background-color: mat.get-color-from-palette($primary, 400);
    height: var(--sidebar-header-height);
  }

  .header-item {
    position: relative;

    &:after {
      position: absolute;
      top: 100%;
      left: 0;
      transition-duration: 250ms;
      transition-property: width;
      transition-timing-function: ease-out;

      width: 0;
      height: .15rem;
      content: ' ';
      background-color: mat.get-color-from-palette($ascent, 400);
    }

    &.selected {
      &:after {
        width: 100%;
      }
    }
  }
}