@import "tailwindcss";
@import url('https://fonts.googleapis.com/css2?family=Caveat&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');

@theme {
    --animate-wiggle: wiggle .5s ease-in-out infinite;
    --animate-fadeIn: fadeIn 2s ease-in infinite forwards;
    --animate-jump: jump .5s ease-in infinite;
    --animate-flip-up: flip-up 0.5s ease-out infinite;
    --animate-shake: shake 0.5s ease-in-out infinite;
    --animate-pulse: pulse 2.5s infinite;
    --animate-jump-out: jump-out 0.5s ease-in-out infinite;
    --animate-jump-in: jump-in 0.5s ease-in-out forwards;

    @keyframes wiggle {
        0% {
            transform: rotate(-6deg);
        }

        100% {
            transform: rotate(-6deg);
        }

        50% {
            transform: rotate(6deg);
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes jump {
        0% {
            opacity: 0;
        }

        100% {
            opacity: 1;
        }
    }

    @keyframes flip-up {
        0% {
            transform: translateY(40px);
            opacity: 0;
        }

        100% {
            transform: translateY(-10px);
            opacity: 1;
        }
    }

    @keyframes shake {
        0%, 100% {
            transform: translateX(0);
        }

        25% {
            transform: translateX(-5px);
        }

        50% {
            transform: translateX(5px);
        }

        75% {
            transform: translateX(-5px);
        }
    }

    @keyframes pulse {
        0%, 100% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }
    }

    @keyframes jump-out {
        0% {
            transform: translateY(0);
        }

        50% {
            transform: translateY(-20px);
        }

        100% {
            transform: translateY(0);
        }
    }

    @keyframes jump-in {
        0% {
            transform: translateY(-10px);
        }

        100% {
            transform: translateY(0);
        }
    }
}

@layer {
    html {
        @apply antialiased;
    }

    .scrollbar-custom::-webkit-scrollbar {
        width: 8px;
    }

    .scrollbar-custom::-webkit-scrollbar-thumb {
        background-color: #9da5a173;
        border-radius: 10px;
    }

    .scrollbar-custom::-webkit-scrollbar-track {
        background: #9da5a173;
    }


    .scrollbar-custom {
        scrollbar-width: thin;
        scrollbar-color: #7d8681 #9da5a173;
    }


    .modal {
        display: none;
    }

    #modal:target {
        display: flex;
    }

    input[type="checkbox"]:checked + .toggle-bg {
        background-color: #34D399;
    }

        input[type="checkbox"]:checked + .toggle-bg .toggle-circle {
            transform: translateX(100%);
        }



    .word {
        position: absolute;
        opacity: 0;
        animation: fadeInOut 8s infinite;
    }

    @keyframes fadeInOut {
        0%, 20% {
            opacity: 1;
        }

        30%, 50% {
            opacity: 0;
        }

        55%, 100% {
            opacity: 0;
        }
    }

    .word:nth-child(1) {
        animation-delay: 0s;
    }

    .word:nth-child(2) {
        animation-delay: 3s;
    }

    .word:nth-child(3) {
        animation-delay: 5s;
    }
}

.iconContent {
    @apply aspect-square flex items-center justify-center p-7 rounded-lg hover:bg-[#f5edf2] hover:border-2 hover:border-[#ebdae5] hover:shadow-2xl cursor-pointer hover:p-6;
}

.pulse {
    @apply animate-pulse;
}

.iconWelcome {
    @apply aspect-square bg-gradient-to-b from-[#2F302B] to-[#191711] border border-[#3D3D3F] flex items-center justify-center p-2 rounded-lg shadow-lg hover:border hover:border-red-300 hover:animate-jump-in cursor-pointer;
}

.buttonNew {
    @apply bg-pink-800 cursor-pointer rounded-lg w-14 h-9 flex items-center justify-center px-1.5 gap-1 text-[#FFFFFF] text-lg font-medium text-center;
}

.buttonSave {
    @apply flex items-center justify-center bg-pink-900 rounded-lg h-9 px-4 py-4 cursor-pointer text-[#FFFFFF] text-base font-medium text-center;
}

.buttonDiscard {
    @apply flex items-center justify-center bg-[#FFFFFF] border border-[#E2E8F0] rounded-lg h-9 px-4 py-4 cursor-pointer text-[#020817] text-base font-medium text-center;
}

.buttonExport {
    @apply bg-pink-800 border border-gray-300 cursor-pointer rounded-lg w-20 flex items-center justify-center gap-1 text-[#FFFFFF] text-lg font-medium text-center;
}

.inputSearch {
    @apply w-full h-full bg-transparent text-[#B5B2E5] text-lg border border-slate-400 rounded-lg pl-10 caret-slate-500 shadow-sm;
}

.selected {
    @apply flex items-center justify-center gap-2 p-2 h-10 bg-[#EDEDF6] border border-[#2A2673] rounded-lg text-[#2A2673] text-sm font-normal text-center;
}

.action {
    @apply flex items-center justify-center gap-1 px-2.5 py-2 h-10 bg-[#EDEDF6] rounded-lg text-[#1F2937] text-sm font-medium text-center;
}

.actionDropDown {
    @apply absolute group-hover:block top-full hidden w-32 py-2 min-h-11 text-[#201F5C] bg-[#EDEDF6] border border-[#2A2673] rounded-md gap-2 items-center;
}