@import "tailwindcss";

@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 1.5s ease-in-out infinite;
    --animate-jump-in: jump-in 1s 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);
        }
    }
}
.animate-jump-outt:hover {
    animation: jump-out 1.5s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2.5s infinite;
}

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

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

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

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

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

@layer{
    html{
      @apply antialiased;
     
  }
}

.pulse {
    animation: animate-pulse;
}



.iconContent{
    display:flex;
    aspect-ratio: 1 / 1;
    cursor:pointer;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    padding: 28px;
}

    .iconContent:hover {
        background-color: #f5edf2;
        border: 2px solid #FF8A65;
        padding: 24px;
        box-shadow: var(--shadow-2xl);
    }



.buttonNew {
    background-color: #ffffff;
    border: 1px solid #13B5EA;
    cursor: pointer;
    border-radius: var(--radius-md);
    width: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    gap: 4px;
    color: #13B5EA;
    font-size: 1.125rem;
    font-weight: 400;
    text-align: center;
}

    .buttonNew:hover {
        background-color: #13B5EA;
        color: #ffffff;
    }


.buttonSave {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #13B5EA;
    border-radius: var(--radius-lg);
    height: 36px;
    padding: 16px;
    cursor: pointer;
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}


.buttonDiscard {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: var(--radius-lg);
    height: 36px;
    padding: 16px;
    cursor: pointer;
    color: #020817;
    font-size: 1rem;
    font-weight: 500;
    text-align: center;
}
@media (min-width: 768px) {
    .md\:grid-cols-6 {
        grid-template-columns: repeat(6,minmax(0,1fr))
    }

    .md\:hidden {
        display: none;
    }

    .md\:items-start {
        align-items: flex-start;
    }

    .md\:flex {
        display: flex;
    }

    .md\:flex-row {
        flex-direction: row;
    }

.icon-container .my-icon path {
    /* This allows the transition to happen smoothly */
    transition: d 0.8 ease-in-out;
}

.ltr-Mezanya .icon-container:hover .my-icon path {
    /* The new path data to be displayed on hover */
    d: path("M15.41 7.41L14 6L8 12L14 18L15.41 16.59L10.83 12L15.41 7.41Z");
}
.rtl-Mezanya .icon-container:hover .my-icon path {
    /* The new path data to be displayed on hover */
    d: path("M8.59 16.59L10 18L16 12L10 6L8.59 7.41L13.17 12L8.59 16.59Z");

}

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