@import "common/variables";

.at-sidenav {
  overflow-x: hidden;

  .simplebar-scroll-content {
    overflow-x: hidden;
  }

  .at-sidenav-container,
  .at-sidenav-scrollbar-container {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    .at-sidenav-list, .sidenav-content {
      width: 100%;
    }
  }

  .cdk-focus-trap-content, mat-sidenav {
    overflow-y: hidden !important;
    overflow-x: hidden;
  }

  .icon-sidenav-toggle {
    transition: transform .25s;
    &.rotate {
      transform: rotate(-180deg);
    }
  }

  .at-sidenav-header-user-wrapper {
    height: 200px;
    img {
      width: 60px;
      height: 60px;
      border-radius: 50%;
    }
  }
}

@media screen and (min-width: 960px) {
  .mat-drawer-backdrop {
    .at-sidenav.at-sidenav-collapsible:not(.collapsed) ~ & {
      display: none !important;
    }
  }

  .mat-sidenav-content {
    transition: all .4s cubic-bezier(.25, .8, .25, 1);
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition-property: transform, max-width, margin-left, margin-right !important;

    .at-sidenav .at-sidenav-collapsible ~ & {
      margin-left: $avSidenavIcon_max-width !important;
    }

    .at-sidenav.at-sidenav-collapsible.collapsed ~ & {
      margin-left: $avSidenavIcon_max-width !important;
    }
  }

  .at-sidenav {
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);

    &.collapsed {
      &.at-sidenav-collapsible {
        max-width: $avSidenavIcon_max-width !important;
        min-width: $avSidenavIcon_max-width !important;
      }
      .at-sidenav-fade-in-on-hover {
        display: none;
        //noinspection CssInvalidPropertyValue
        animation: .5s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadeout;
      }
    }

    &:not(.collapsed) {
      .at-sidenav-fade-in-on-hover {
        display: block;
        //noinspection CssInvalidPropertyValue
        animation: .5s cubic-bezier(.25, .8, .25, 1) 0s normal forwards 1 fadein;
      }
    }
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeout {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}