// Closed Sidebar

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.closed-sidebar {
  .app-sidebar {
    width: $app-sidebar-width-collapsed;
    min-width: $app-sidebar-width-collapsed;
    flex: 0 0 $app-sidebar-width-collapsed;
    z-index: 13;
    transition: width .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;

    .app-header__logo {
      width: auto;
    }

    .logo-src {
      width: auto;
      margin: 0 auto;
      justify-content: center;
      transition: width .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
      
      .logo-text {
        .logo-full {
          display: none;
          opacity: 0;
          transform: scale(0.8);
        }
        
        .logo-collapsed {
          display: block;
          opacity: 1;
          transform: scale(1);
          animation: fadeInScale .3s ease-out;
        }
      }
    }


    .v-sidebar-menu {
      padding: 0 ($layout-spacer-x / 3);

      .vsm-dropdown {
        display: none;
      }

      .vsm-header {
        text-indent: -999em;

        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 100%;
          height: 1px;
          background: $dropdown-link-hover-bg;
          text-indent: 0px;
        }
      }

      .vsm-arrow,
      .vsm-title {
        display: none;
        opacity: 0;
        transform: translateX(-10px);
        transition: opacity .3s ease, transform .3s ease;
      }

      .vsm-icon {
        left: 50%;
        margin-left: -20px;
      }
    }

  }

  .app-header .app-header__content {
    padding-left: $app-sidebar-width-collapsed;
  }

  .app-main__outer {
    padding-left: $app-sidebar-width-collapsed;
  }
}

// Closed Sidebar Medium

.closed-sidebar-open.closed-sidebar.closed-sidebar-md {
  .app-sidebar {
  }
}

// Closed Sidebar Open

.closed-sidebar-open {
  &.closed-sidebar {
    .app-sidebar {
      width: $app-sidebar-width;
      transition: width .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;

      .logo-src {
        width: $logo-width;
        margin: 0;
        transition: width .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
        
        .logo-text {
          .logo-full {
            display: block;
            opacity: 1;
            transform: scale(1);
            animation: fadeInScale .3s ease-out;
          }
          
          .logo-collapsed {
            display: none;
            opacity: 0;
            transform: scale(0.8);
          }
        }
      }


      .v-sidebar-menu {
        padding: 0 $layout-spacer-x $layout-spacer-x;

        .vsm-arrow,
        .vsm-title {
          display: block;
          opacity: 1;
          transform: translateX(0);
          transition: opacity .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s,
                      transform .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s;
        }

        .vsm-header {
          text-indent: 0px;

          &::before {
            display: none;
          }
        }

        .vsm-icon {
          left: 5px;
          margin-left: 0;
        }

        .vsm-dropdown {
          display: block;
        }
      }
    }
  }
}

