@import "./mixin.less";

.sidebar-wrapper {
  @apply fixed sm:sticky top-0 left-0 hidden sm:!flex flex-col justify-start items-start w-64 h-screen py-4 pl-2 z-10 bg-white sm:bg-transparent shadow-2xl sm:shadow-none overflow-x-hidden overflow-y-auto transition-all;
  .hide-scroll-bar();

  > .close-container {
    @apply w-full pr-6 my-2 flex sm:hidden flex-row justify-end items-center;

    > .action-btn {
      @apply p-1 bg-gray-100 rounded shadow;

      > .icon-img {
        @apply w-4 h-auto;
      }
    }
  }

  > .action-btns-container {
    @apply w-full px-2 my-2 flex flex-col justify-start items-start shrink-0;

    > .action-btn {
      @apply leading-10 px-4 rounded-lg text-base hover:bg-white;

      > .icon {
        @apply mr-1;
      }
    }
  }
}
