@tailwind base;
@tailwind components;
@tailwind utilities;

* {
@apply scrollbar-thumb-yellow-400 scrollbar-track-coolgray-200 scrollbar-w-1;
}
html {
    @apply h-full min-h-full bg-coolgray-100 ;
}
body {
    @apply bg-coolgray-100 text-white min-h-full antialiased;
}
input[type="checkbox"] {
    @apply toggle toggle-warning toggle-sm;
}
input {
    @apply input input-sm;
}
input[type="text"],[type="number"],[type="email"],[type="password"] {
    @apply read-only:opacity-40;
}

textarea {
    @apply textarea;
}
select {
    @apply select select-sm disabled:opacity-40 font-normal;
}

button[type="button"] {
    @apply btn btn-xs btn-ghost no-animation normal-case text-white;
}
button[type="submit"] {
    @apply btn btn-xs no-animation normal-case text-white btn-primary;
}
button[isWarning] {
    @apply btn-error text-white;
}
button[isHighlighted] {
    @apply btn-primary text-white;
}
h1 {
    @apply text-3xl font-bold pb-4;
}
h2 {
    @apply text-2xl font-bold pb-4;
}
h3 {
    @apply text-xl font-bold py-4;
}
a {
    @apply text-neutral-400 hover:text-white text-sm link link-hover hover:bg-transparent;
}

.box {
    @apply flex items-center justify-center text-sm rounded cursor-pointer h-14 bg-coolgray-200 hover:bg-coollabs-100 hover:text-white p-2 hover:no-underline;
}

.main-menu {
    @apply relative float-left;
}
.main-menu:after {
    content: "/";
    @apply font-bold absolute right-0 top-0 text-neutral-400 px-2 pt-[0.7rem];
}
.magic-input {
    @apply input input-ghost w-96 placeholder:text-neutral-400 text-sm;
}
.magic-items {
    @apply absolute top-16 mt-2 w-[24rem] bg-coolgray-200  rounded-xl outline outline-coolgray-500;
}
.magic-item {
    @apply text-sm flex items-center gap-4 m-2 py-2 pl-4 cursor-pointer hover:bg-coolgray-500 text-neutral-400 hover:text-white rounded-xl transition-colors hover:shadow;
}
.magic-item-focused {
    @apply bg-neutral-700 text-white;
}