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

@layer base {
    body {
        @apply bg-ctp-crust;
        font-family: Inter,sans-serif;
        font-weight: 400;
    }

    a {
        @apply text-ctp-lavender;
    }

    .input {
        @apply w-full pl-3 pr-3 pt-2 pb-2 rounded border bg-ctp-mantle border-ctp-overlay0 hover:border-ctp-overlay1 focus:border-ctp-lavender text-ctp-text outline-none;
    }

    .input-file {
        @apply block w-full border rounded cursor-pointer bg-ctp-base border-ctp-surface0 text-ctp-subtext0 focus:outline-none;
        @apply file:bg-ctp-mantle file:border-ctp-surface0 file:mr-5 file:py-2 file:px-3 file:h-full file:border-y-0 file:border-l-0 file:border-r file:text-ctp-blue hover:file:cursor-pointer hover:file:bg-ctp-base;
    }

    label {
        @apply text-ctp-text;
    }

    .button {
        @apply pt-1 pb-1 pl-3 pr-3 sm:pt-2 sm:pb-2 sm:pl-5 sm:pr-5 rounded bg-ctp-mantle border border-ctp-surface0 hover:bg-ctp-base text-ctp-blue cursor-pointer;
    }

    .link-button {
        @apply button text-ctp-lavender cursor-pointer border-none;
    }

    .hline {
        @apply border-t border-ctp-surface0 ml-0 mr-0;
    }

    h1 {
        @apply text-ctp-text pt-5 pb-5 border-b border-ctp-overlay0 mb-5;
    }

    label {
        @apply text-ctp-text;
    }

    .icon {
        @apply inline-block select-none text-center overflow-visible w-6 h-6 stroke-ctp-text;
    }
}

@layer utilities {
    .bg-grid {

        background: 
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0px, rgba(187, 65, 143, 1) 10%, 
                rgba(187, 65, 143, 1) 2px, rgba(0, 0, 0, 0) 0px), 
            linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgba(187, 65, 143, 1) 10%, 
                rgba(187, 65, 143, 1) 2px, rgba(0, 0, 0, 0) 0px);
        background-size: 2em 4em, 6em 2em;
        transform: perspective(500px) rotateX(60deg) scale(0.5);
        transform-origin: 50% 0%;
        z-index: -1;

        @apply absolute w-[250%] -left-[75%] h-[200%];
    }
}