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

@layer base {


    button {
        @apply px-4 py-1 rounded-md
    }

    label {
        @apply w-fit text-[0.9rem] text-a4 dark:text-a5 mr-3
    }

    input, textarea {
        @apply w-full border grow ring-0 outline-none text-[0.9rem] focus:border-a6 placeholder:text-a4 text-a1 dark:text-a8 px-3 py-1.5 rounded-md dark:bg-inherit dark:border-a3 font-mono
    }
}

@layer components {
    .btn-primary {
        @apply bg-black text-white border border-black hover:bg-white hover:text-black dark:text-black dark:border-white dark:bg-white dark:hover:text-white dark:hover:bg-black dark:hover:border-white active:bg-white active:text-black focus:bg-white focus:text-black dark:active:text-white dark:active:bg-black dark:active:border-white dark:focus:text-white dark:focus:bg-black dark:focus:border-white rounded-md transition-all duration-500 tracking-wide
    }

    .btn-secondary {
        @apply bg-a8 text-a4 hover:text-black border hover:border-black border-a7 focus:text-black focus:border-black dark:bg-a1 dark:text-a4 dark:border-a4 dark:hover:text-white dark:hover:border-white  dark:active:text-white dark:active:border-white dark:focus:text-white dark:focus:border-white transition-all duration-500 rounded-md tracking-wide
    }

    .blue-gradient {
        @apply bg-gradient-to-tl from-[#00F5A0] to-[#00D9F5]
    }

    .orange-gradient {
        @apply bg-gradient-to-tl from-[#F9DB43] to-[#FD495E]
    }

    .purple-gradient {
        @apply bg-gradient-to-tl from-[#4646FB] to-[#BE4DFF]
    }
    
    .g-input {
        @apply px-3 py-1 border border-a4 rounded-md text-sm text-a1 dark:text-a8 w-full font-mono
    }

    .g-big-circle {
        @apply w-14 aspect-square rounded-full bg-a7 dark:bg-a3
    }

    .g-small-circle {
        @apply w-2 aspect-square rounded-full bg-a7 dark:bg-a3
    }


    .preview-container {
        @apply w-full h-screen md:h-[80vh] border border-a7 dark:border-a4 rounded-md flex flex-col justify-between items-center
    }

    .component-toggle-top {
        @apply flex lg:hidden preview-buttons-section rounded-t-md border-b
    }

    .component-toggle-bottom {
        @apply hidden lg:flex preview-buttons-section rounded-b-md border-t
    }

    .preview-buttons-section {
        @apply w-full flex justify-start gap-5 bg-a8 dark:bg-a1 p-5 border-a7 dark:border-a4
    }

}
