body { color: rgb(var(--text-color)); background-color: rgb(var(--bg-1)); } .w-header { @apply z-20 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)); }