/*!
  *  Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
 */
@use 'sass:map';

@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';

$sidebarWidthOpen: 320px !default;
$sidebarWidthMinimized: 48px !default;
$burger-height: 31px;
$burger-margin: 8px;

mat-sidenav-container {
  height: 100%;

  .sidenav-content {
    width: 100%;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    /*For firefox, since it doesn't support overlay value*/
    scrollbar-width: thin;
    /*overlay value for chrome browsers*/
    overflow-y: overlay;
    overflow-x: hidden;
  }

  ::-webkit-scrollbar-thumb {
    background: transparent !important;
  }
  ::-webkit-scrollbar-track {
    margin-top: 11.5px;
    &:hover {
      margin-top: 13px;
    }
  }

  mat-sidenav-content {
    transition: margin-left 0.5s ease-in-out;
    margin-left: $sidebarWidthOpen !important;

    bci-burger {
      // if it is the small header
      @media (max-width: $screen-sm-min) {
        top: calc(#{$burger-margin} + (#{$header-height-screen-xs} - #{$burger-height}) / 2);
      }
      @each $width, $padding in $content-padding {
        @media (min-width: $width) {
          left: $padding;
        }
      }
      width: 30px;
      z-index: 1000;
    }
  }

  &.closed-sidebar:not(.hidden-sidebar) mat-sidenav-content {
    margin-left: $sidebarWidthMinimized !important;
  }

  &.hidden-sidebar mat-sidenav-content {
    transition: margin-left 0s ease-in-out;
    margin-left: 0 !important;
  }

  mat-sidenav {
    background-color: $boschGray20;
    width: $sidebarWidthOpen;
    transition: width 0.5s ease-in-out;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;

    &.closed-sidebar {
      width: $sidebarWidthMinimized;

      .sidenav-header {
        height: 48px;
        width: 48px;
        .title {
          opacity: 0;
        }
      }
    }

    .sidenav-items {
      padding: 0;

      li {
        width: 100%;
        margin: 0;
      }

      .sidenav-item {
        padding: 0 16px;
        display: inline-block;
        width: 100%;
        line-height: 48px;
        @include make-font-regular(16px);

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

        &.active {
          border-color: $boschBlue50;
        }

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

    .sidenav-subitems {
      padding: 0 0 0 16px;
    }

    &:hover:not(.closed-sidebar) {
      ::-webkit-scrollbar {
        padding-right: 0;
      }
      ::-webkit-scrollbar-thumb {
        background: $boschGray55 !important;
        background-clip: padding-box !important;
        border: 5px solid transparent !important;
        &:hover {
          background-color: $boschGray30 !important;
          background-clip: padding-box !important;
          border: 3px solid transparent !important;
        }
      }
    }
  }

  ::ng-deep {
    .mat-drawer-content {
      overflow: hidden;
    }

    .mat-drawer-inner-container {
      display: flex;
      flex-direction: column;
      overflow-x: hidden;
    }

    .mat-drawer-backdrop {
      opacity: 0;
    }
  }

  .sidenav-header {
    cursor: default;
    position: relative;

    bci-burger {
      color: $boschWhite;
    }

    height: 48px;
    min-height: 48px;

    .title {
      display: inline-block;
      margin: 0;
      margin-top: 9px;
      margin-left: 16px;
      white-space: nowrap;
      width: 272px; // 320px -48px
      overflow: hidden;
      transition: 0.5s ease-in-out;
      text-overflow: ellipsis;
      color: $boschWhite;
      @include make-font-regular(20px);
      opacity: 1;
      font-weight: 700;
    }
  }
}

.content-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: row;
}

.bci-content-container-main {
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
