@use 'sass:map' as map;
@use 'sass:color' as color;
@use '@angular/material' as mat;
@use 'styles/theming' as theming;

:host {
  display: block;
  user-select: none;
}

[mat-list-item] {
  color: inherit;
  &.active {
    color: map.get(theming.$theme, 'color', 'accent', 'default');
  }

  ::ng-deep {
    .mat-list-item-content {
      padding: 0 16px;
      :not(:host.expanded) & {
        padding: initial;
        justify-content: center;
      }
    }

    .mat-list-text {
      :not(:host.expanded) & {
        display: none;
      }
    }
  }
}

.divider {
  width: 60%;
  margin: 16px 20px;
  border-top: 1px solid
    color.change(
      map.get(theming.$theme, 'color', 'primary', 'default-contrast'),
      $alpha: 0.12
    );
  :host-context(.laptop) & {
    display: block;
    width: calc(100% - 32px);
    margin: 16px auto;
  }
}

.subheader {
  margin: 12px 20px;
  @include mat.typography-level(theming.$typography-config, 'caption');
  text-transform: uppercase;
  color: color.change(
    map.get(theming.$theme, 'color', 'primary', 'default-contrast'),
    $alpha: map.get(theming.$theme, 'opacity', 'text', 'secondary')
  );
}
