/*!
  *  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';

:host {
  .slide {
    position: absolute;
    top: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
  }

  .sidebar-back-button {
    margin-right: -5 * $grid-size;
    transform: translateX(-5 * $grid-size);
    display: inline-block;
    vertical-align: middle;
  }

  .sidebar-apply-button {
    width: 100%;
  }

  .sidebar-center,
  .sidebar-header,
  .sidebar-footer {
    padding: 2 * $grid-size 4 * $grid-size;
    box-sizing: border-box;
  }

  .sidebar-header {
    border-bottom: 1px solid $boschGray90;
    height: $header-height;
    line-height: $header-height;
    padding: 0 (4+2) * $grid-size;

    @media (max-width: $screen-sm-min) {
      height: $header-height-screen-xs;
      line-height: $header-height-screen-xs;
    }

    h3 {
      display: inline-block;
      vertical-align: middle;
      margin: 0;
    }
  }

  .sidebar-center {
    flex-grow: 1;
    overflow: auto;

    ::ng-deep {
      .mat-list-item {
        height: auto;
        min-height: 6 * $grid-size;

        .mat-icon {
          margin-right: $grid-size * 2;
        }

        button.mat-mdc-icon-button {
          margin-right: 16px;
          margin-left: 0px;
        }

        &:focus {
          outline: 0;
          background: rgba(0, 0, 0, 0.04); // same as angular material
        }

        // TODO: move to material-theme!
        .mat-list-text {
          justify-content: center;
          line-height: initial;
        }

        // TODO: move to material-theme!
        .mat-list-item {
          line-height: initial !important;
        }

        // TODO: move to material-theme!
        .mat-list-item-content.mat-list-item-content.mat-list-item-content {
          padding: $grid-size 2 * $grid-size;
          min-height: 48px;
        }
      }

      .mat-list,
      .mat-selection-list {
        width: 100%;

        .mat-list,
        .mat-selection-list {
          @include make-border(0 0 1px 0, $boschGray90);

          & > .mat-list-item {
            border-bottom: 0;
          }
        }

        &:focus {
          outline: 0;
        }

        & > .mat-list-item,
        & > .mat-list,
        & > .mat-selection-list {
          &:last-child {
            border-bottom: 0;
          }
        }
      }
    }
  }
}
