@import '../../../theme/color';

.sidenav {
  height: 100%;
  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.25);
  z-index: 1;
  background-color: $aeap-color-white;

  .header {
    background: $aeap-active-tab-bg;
    height: 3rem;

    .header-icon-collapse {
      color: $aeap-color-grey-1;
      transform: matrix(1, 0, 0, 1, 0, 0);
    }
  }
}

@media screen and (max-height: 100%) {
  .sidenav {
    height: 100%;
  }
}

.left-side-menu-nav {
  min-width: 5rem;
  .contain {
    padding: 0.5rem;
    border-top: 0.1rem solid $aeap-color-light-greyish-white;

    .looper {
      &.active {
        background-color: $aeap-color-primary;
        border-radius: 0.2rem;
        color: #fff;
        pointer-events: none;
        cursor: default;
        img {
          filter: invert(100%) sepia(100%) brightness(200%) hue-rotate(360deg) saturate(0%) contrast(1000%);
        }
      }
      img {
        margin-bottom: 0.5rem;
      }
    }
  }
}

.icon-label {
  white-space: pre-wrap;
  width: 7.5rem;
  text-align: center;
}