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

body {
    @apply bg-coolgray-100 text-white font-sans;
}

label {
    @apply text-sm pb-2  tracking-wider;
}
input,
textarea {
    @apply border border-solid border-coolgray-500 bg-coolgray-200 rounded p-2 px-4  text-white disabled:text-neutral-600 read-only:text-neutral-600 read-only:select-none outline-none focus:bg-coolgray-200/50 transition-all hover:bg-coolgray-200/50;
}
select {
    @apply border border-solid border-coolgray-400 rounded p-2 px-4 bg-coolgray-200 text-white disabled:text-neutral-600 read-only:select-none outline-none;
}
button {
    @apply border border-solid border-coolgray-200 px-3 p-1 cursor-pointer;
}
h1 {
    @apply text-3xl font-bold pb-4;
}
h2 {
    @apply text-xl font-bold pb-4;
}
h3 {
    @apply text-lg font-bold pb-4;
}
a {
    @apply text-neutral-400 m-2 hover:underline;
}

.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 absolute right-0 top-0 text-neutral-400 px-2 pt-[0.5rem];
}
.magic-input {
    @apply w-[25rem] rounded outline-none bg-coolgray-400 focus:bg-neutral-700 text-white;
}
.magic-items {
    @apply absolute top-12 w-[25rem] bg-coolgray-200 border-b-2 border-r-2 border-l-2 border-solid border-coolgray-100 rounded-b;
}
.magic-item {
    @apply m-2 py-2 pl-4 cursor-pointer hover:bg-neutral-700 text-neutral-300 hover:text-white;
}
.magic-item-focused {
    @apply bg-neutral-700 text-white;
}