/*!
  *  Copyright (C) 2019 Robert Bosch GmbH Copyright (C) 2019 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */

@import '@bci-web-core/common-styles/sass/bci/bci-variables';
@import '@bci-web-core/common-styles/sass/bci/mixins/borders';
@import '@bci-web-core/common-styles/sass/bci/mixins/typography';

:host {
  @include make-border(1px, $boschGray80);
  background: $boschWhite;

  mat-list.mat-mdc-list {
    * {
      justify-content: flex-start;
    }
    mat-divider.mat-divider {
      @include make-border(1px 0px 0px 0px, $boschGray85);

      // hide first divider if first child
      &:first-child {
        display: none;
      }
    }

    mat-list-item.mat-mdc-list-item {
      border: none;
      min-width: 292px;
      max-width: 292px;
      padding: 0px;

      &:last-of-type {
        border: none;
      }

      p {
        @include make-font-regular(14px);
        line-height: $grid-size * 6;
        height: $grid-size * 6;
        padding: 0 $grid-size * 4 0 $grid-size * 7;
        max-width: 100%;
        transition: none;

        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        display: inline-block;

        &:hover:not([aria-disabled='true']) {
          background: none;
          transition: none;
        }
      }

      // To remove the list hover,active states whenever there is a bci-chip within the list item
      &:hover,
      &:active {
        &:has(bci-chip) {
          background: transparent;
        }
      }

      // ng-deep is needed otherwise the next class cannot be matched in any way since the parent is encapsulated and the following element matched is not
      ::ng-deep .mdc-list-item__content {
        padding: 0;

        button {
          &:not(.mat-mdc-chip-action) {
            width: 292px;
          }
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          text-align: inherit;
          justify-content: flex-start;
        }

        // when mat list item content is a command bar item, fixing it's position
        .commandbar-item {
          &:not(> .button-integrated) {
            margin-left: $grid-size * 2;
          }

          > bci-chip-selectable {
            margin-left: 2 * $grid-size;
          }

          // !important = making sure custom ngStyle is ignored, so the width here is forced
          // if not set properly, then button is smaller than list item and click event might not be hit if too small
          width: calc(100% - #{$grid-size * 2}) !important;

          // if this is a custom command bar buttom item then we need to make sure that it's width is properly set, see previous width comment
          // ng-deep is needed since the button here is encapsulated
          > ::ng-deep button {
            width: 100% !important;
          }

          bci-chip-selectable {
            height: $grid-size * 4;
            display: block;
          }

          button:not(.mat-mdc-chip-action) {
            margin-bottom: 8px !important;
          }

          mat-radio-group {
            display: flex;
            flex-wrap: wrap;
            row-gap: 8px;
          }
        }
      }

      // styling expansion panel, used for inline filters
      mat-expansion-panel.mat-expansion-panel {
        border: none;
        width: 100%;
        transition: none;

        .mat-expansion-panel-header {
          // removing expansion panel hovering
          &:hover:not([aria-disabled='true']) {
            background: none;
          }

          &.mat-expanded {
            @include make-border(0px 0px 1px 0px, $boschGray85);
          }
          padding: 0 $grid-size * 2 0 $grid-size * 6;

          // it has to be important since when panel is expanded angular is setting it's height inline at 64px
          height: $grid-size * 6 !important;

          // styling list item expantion header, making sure it's text doesn't flow outside
          .mat-expansion-panel-header-title {
            @include make-font-regular(14px);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: inline-block;
          }

          // ng-deep is needed otherwise the next class cannot be matched in any way since the parent is encapsulated and the following element matched is not
          // fixing the indicator
          ::ng-deep .mat-expansion-indicator {
            padding: 0;

            &::after {
              font-size: $grid-size * 3;
              padding: 0;
            }
          }
        }

        // ng-deep is needed otherwise the next class cannot be matched in any way since the parent is encapsulated and the following element matched is not
        ::ng-deep .mat-expansion-panel-content .mat-expansion-panel-body {
          @include make-border(0px 0px 1px 0px, $boschGray85);
          padding: 0;
          height: $grid-size * 6;

          // styling the list item link button shown in the expansion body
          p.mat-button {
            @include make-font-regular(14px);
            line-height: $grid-size * 6;
            height: $grid-size * 6;
            padding: 0 $grid-size * 4 0 $grid-size * 6;
            max-width: 100%;
          }
        }
      }
    }
  }
}
