@import './button';

.p-confirmpopup {
    @apply absolute mt-[10px] top-0 left-0
        border border-surface-200 dark:border-surface-700 rounded-md
        bg-surface-0 dark:bg-surface-900
        text-surface-700 dark:text-surface-0
        shadow-[0_4px_6px_-1px_rgba(0,0,0,0.1),0_2px_4px_-2px_rgba(0,0,0,0.1)]
        before:bottom-full before:left-5 before:h-0 before:w-0 before:absolute before:pointer-events-none
        before:border-[10px] before:-ms-[10px] before:border-transparent before:border-b-surface-200 dark:before:border-b-surface-700
        after:bottom-full after:left-5 after:h-0 after:w-0 after:absolute after:pointer-events-none
        after:border-[8px] after:-ms-[8px] after:border-transparent after:border-b-surface-0 dark:after:border-b-surface-900
}

.p-confirmpopup-content {
    @apply flex items-center p-3 gap-4
}

.p-confirmpopup-icon {
    @apply text-2xl w-6 h-6 text-surface-700 dark:text-surface-0
}

.p-confirmpopup-footer {
    @apply flex justify-end gap-2 pt-0 px-3 pb-3
}

.p-confirmpopup-footer button {
    @apply w-auto
}

.p-confirmpopup-footer button:last-child {
    @apply m-0
}

.p-confirmpopup-flipped {
    @apply -mt-[10px] mb-[10px]
}

.p-confirmpopup-enter-from {
    @apply opacity-0 scale-y-75
}

.p-confirmpopup-leave-to {
    @apply opacity-0
}

.p-confirmpopup-enter-active {
    @apply [transition:transform_120ms_cubic-bezier(0,0,0.2,1),opacity_120ms_cubic-bezier(0,0,0.2,1)]
}

.p-confirmpopup-leave-active {
    @apply transition-opacity duration-100 ease-linear
}

.p-confirmpopup-flipped:after,
.p-confirmpopup-flipped:before {
    @apply bottom-auto top-full
}

.p-confirmpopup-flipped:after {
    @apply border-b-transparent border-t-surface-0 dark:border-t-surface-900
}

.p-confirmpopup-flipped:before {
    @apply border-b-transparent border-t-surface-200 dark:border-t-surface-700
}