body {
  color: rgb(var(--text-color));
  background-color: rgb(var(--bg-1));
}

.w-header {
  @apply z-[1000] fixed top-0 right-0 px-5 py-3 duration-300 shadow-md;
  background-color: rgb(var(--bg-2));
  box-shadow: var(--box-shadow);
}

.w-header-search {
  @apply px-4 z-40 duration-300 shadow-md -top-20 focus-within:top-0 right-0;
  background-color: rgb(var(--bg-2));
}

.vertical-menu {
  @apply text-base h-screen fixed w-64 top-0 z-50 duration-300 border-l-0 shadow-md;
  background-color: rgb(var(--bg-2));
  box-shadow: var(--box-shadow);
}

.icon-btn {
  @apply flex
          items-center
          justify-center
          transition-colors
          duration-300;
  color: rgb(var(--text-color));
}

.icon-btn.profile {
  @apply border;
  border-radius: var(--rounded-box);
  border: 1px solid rgb(var(--border-color));
  color: rgb(var(--text-color));
}

.icon-btn:hover {
  color: rgb(var(--text-color));
  background-color: rgb(var(--bg-1));
}
