.header {
  @apply com-h-12 com-sticky com-top-0 com-z-20;
}

.toggle {
  @apply com-flex com-items-center com-justify-center;
}

.sidebar {
  transition: 0.3s;
  @apply com-pt-0 com-z-[100] com-bg-white com-text-black com-overflow-y-auto com-top-[68px];

  &.hideFullSidebar {
    @apply com-w-0;
  }
  &.forWindow {
    @apply com-fixed md:com-h-[calc(100dvh-70px)] com-h-[calc(100dvh-130px)];
  }
  &.notForWindow {
    @apply com-h-full;
  }
  &.left {
    @apply com-left-0;
  }
  &.right {
    @apply com-right-0;
  }
  &.showBorder {
    @apply com-border-y-0 com-border-x com-border-solid com-border-Bright-Gray;
  }

  &.expanded {
    &.xsmall {
      @apply com-w-[60px];
    }
    &.small {
      @apply com-w-40;
    }
    &.medium {
      @apply com-w-48;
    }
    &.large {
      @apply com-w-52;
    }
    &.extraLarge {
      @apply com-w-80;
    }
    .header {
      h1 {
        @apply com-flex com-ml-0 com-cursor-pointer;
      }
      .toggle {
        @apply com-ml-auto;
      }
    }

    .header-medium {
      h1 {
        @apply com-text-base com-justify-start com-py-2;
      }
      fa-icon {
        @apply com-text-sm;
      }
    }

    .header-large {
      h1 {
        @apply com-text-xl com-justify-center;
      }

      .toggle {
        fa-icon {
          @apply com-text-xl;
        }
      }
    }
  }

  .header {
    @apply com-bg-white com-text-black com-flex com-items-center com-justify-center com-p-2;
    h1 {
      @apply com-hidden com-text-xl com-m-0 com-flex-1;
    }
  }

  .header-medium {
    @apply com-m-4 com-mb-3 com-p-0;
    .toggle {
      fa-icon {
        @apply com-text-sm;
      }
    }
  }

  .header-xl {
    .toggle {
      fa-icon {
        @apply com-text-xl;
      }
    }
  }
}
