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


/* Pulse animation */
@keyframes riacoPulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.riaco-pulse {
    animation: riacoPulse 0.25s ease-out;
}


.riaco-feedback-features__pagination ul { 
    @apply flex gap-2 justify-center;
}

.riaco-feedback-features__pagination li a,
.riaco-feedback-features__pagination li span {
    @apply px-3 py-1 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100;
}

.riaco-feedback-features__pagination li .current {
    @apply bg-blue-600 text-white border-blue-700;
}

.riaco-feedback-features__submit-button{
    background-color: var(--wp--preset--color--contrast, black);
    color: white;
}
.riaco-board--label--planned,
.riaco-feedback-roadmap__title--planned{
     @apply bg-blue-100 text-blue-700;
}
.riaco-board--label--in-progress,
.riaco-feedback-roadmap__title--in-progress{
     @apply bg-purple-100 text-purple-600;
}
.riaco-board--label--completed,
.riaco-feedback-roadmap__title--completed{
     @apply bg-green-100 text-green-700;
}
.riaco-board--label--recent{
     @apply bg-amber-50 text-amber-700;
}

.riaco-board--upvote {
    @apply bg-gray-100 text-gray-600 ;
}
/* Normal hover */
.riaco-board--upvote:hover {
    @apply bg-gray-200; 
}

/* Applied after a vote */
.riaco-board--upvote.riaco-voted{
    @apply bg-blue-600 text-white; 
}
/* Hover when it has riaco-voted class */
.riaco-board--upvote.riaco-voted:hover {
    @apply bg-blue-700; 
}


/* riaco feedback form */
.riaco-feedback-f{
    container-type: inline-size;
    container-name: riaco-submit-form;
}
.riaco-feedback-features__container{
    display: flex;
    flex-direction: column;
}

/* Right column expands */
.riaco-feedback-features__board  {
    flex: 1 1 auto;
}

@container riaco-submit-form (width >= 800px) {
  
     .riaco-feedback-features__container{
        flex-direction: row;
    }

     .riaco-feedback-features__form{
        max-width: 400px;
    }
}