/*!
  *  Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 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/icons';
@import '@bci-web-core/common-styles/sass/bci/mixins/typography';

:host {
  $itemSeparatorColor: rgba(255, 255, 255, 0.05);
  display: block;

  &:hover {
    background-color: rgba(0, 0, 0, 0.05);

    mat-icon,
    p {
      color: $boschGray80;
    }
  }

  &.nav-link-hidden {
    border-width: 0;
    overflow: hidden;

    .mat-mdc-list-item {
      transition: max-height 0.3s ease-in-out;
      border-width: 0;
      max-height: 0;
      overflow: hidden;
    }
  }

  .sub-nav-link {
    [matline] {
      margin-left: 36px;
    }
  }

  .mat-mdc-list-item {
    user-select: none;
  }

  &:not(.nav-link-hidden) .mat-mdc-list-item {
    background-color: $boschGray20;
    &:hover {
      background-color: $boschGray30;
    }
    &:active {
      background-color: $boschGray40;
    }
  }

  &:not(.nav-link-hidden) .mat-mdc-list-item.active {
    background-color: $boschBlue60;
    &:hover {
      background-color: $boschBlue70;
    }
    &:active {
      background-color: $boschBlue80;
    }
  }

  &:not(.nav-link-hidden) .mat-mdc-list-item.active-expandable {
    background-color: $boschGray20;
    border-right-width: 1px;
  }

  .mat-mdc-list-item {
    height: 48px;
    box-sizing: border-box;
    max-height: 200px;
    transition: background-color 0.2s ease-in-out, max-height 0.4s ease-in-out;
    padding: 0px;

    &.has-items::before {
      @include make-icon($Bosch-Ic-arrow-expand-right, 24px);
    }

    &.sub-nav-link {
      background-color: $boschGray20;

      &:hover {
        background-color: $boschGray30;
      }
      &:active {
        background-color: $boschGray40;
      }

      &.active {
        background-color: $boschBlue60;
        &:hover {
          background-color: $boschBlue70;
        }
        &:active {
          background-color: $boschBlue80;
        }
      }
    }

    mat-icon,
    p {
      color: $boschWhite;
    }

    &.active {
      p {
        color: $boschBlack;
      }
    }

    mat-icon {
      height: 24px;
      margin-left: 3px;
      padding: 4px;

      &:before {
        vertical-align: baseline;
      }

      &.expand-icon {
        margin-left: auto;
        &:before {
          vertical-align: inherit;
        }
      }
    }

    &.active {
      mat-icon {
        color: $boschBlack;
      }
    }

    .Bosch-Ic-arrow-expand-left {
      padding: 0;
    }

    .mat-badge-warn > span {
      background: $boschRed50;
    }

    .mat-badge-accent > span {
      background: $boschSignalYellow;
    }

    p {
      @include make-font-regular($font-size-base);
      line-height: $grid-size * 4;
    }
  }
}

::ng-deep mat-sidenav.closed-sidebar {
  .mdc-list-item__content {
    padding: 0 0 0 4px !important;
  }
}

.heading {
  p {
    border-bottom: 1px solid;
    padding: 0;
    position: relative;
    right: 10px;
  }
}

.sub-nav-links-container {
  .sub-nav-links-expanded & {
    overflow: visible;
  }

  &,
  &.ng-animating {
    overflow: hidden;
  }
}
