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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: scale(0.88);
        transform-origin: top left;
    }
    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: top left;
    }
}

.animate-fadeIn {
    animation: fadeIn 0.15s ease;
}

#adminmenu img,
.wp-menu-image,
.wp-menu-image::before {
    border-style: none;
}

 #coupons-plus-admin *,
 #coupons-plus * {
     text-wrap: auto;
 }

#coupons-plus-admin input[type='text']:focus,
input[type='text']:focus {
    box-shadow: none;
}
#coupons-plus-admin div .react-flow__node,
#coupons-plus-admin .react-flow__edge-path,
#coupons-plus-admin .react-flow__edge {
    transition: transform 0.2s ease-out;
    visibility: visible !important;
}
 #coupons-plus-admin input,
 #coupons-plus-admin [data-vaul-drawer] input,
 #coupons-plus-admin [data-vaul-overlay] input,
 #coupons-plus-admin .cp-select__menu-portal input,
 #coupons-plus-admin .cp-hot-toast-container input {
     min-height: initial;
 }

 #coupons-plus-admin li,
 #coupons-plus-admin [data-vaul-drawer] li,
 #coupons-plus-admin [data-vaul-overlay] li,
 #coupons-plus-admin .cp-select__menu-portal li,
 #coupons-plus-admin .cp-hot-toast-container li {
     margin: 0;
 }

 #coupons-plus-admin p,
 #coupons-plus-admin [data-vaul-drawer] p,
 #coupons-plus-admin [data-vaul-overlay] p,
 #coupons-plus-admin .cp-select__menu-portal p,
 #coupons-plus-admin .cp-hot-toast-container p {
     margin: 0;
 }

#coupons-plus-admin [data-vaul-drawer],
#coupons-plus-admin [data-vaul-overlay],
#coupons-plus-admin .cp-select__menu-portal,
#coupons-plus-admin .cp-hot-toast-container {
    @apply font-sans;
}

#coupons-plus {
    @apply font-sans;
    /*font-family: 'Host Grotesk', sans-serif;*/
    position: absolute;
    width: 100%;
    /*
        precondtions:
        padding: 0;
         height: calc(100vh - 92px);
    */
    height: calc(100vh - 90px);
    top: 0;
    z-index: 1002;

    @apply antialiased overflow-hidden
           bg-gray-100;
}

#coupons-plus button {
    @apply focus:outline-none focus:shadow-none;
}

/* React Select menu transitions */
#coupons-plus [class*="menu"] {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out !important;
}

#coupons-plus .cp-select__multi-value__label {
    white-space: normal;
}

#coupons-plus .cp-select__clear-indicator,
#coupons-plus .cp-select__dropdown-indicator {
    @apply px-1
}

#coupons-plus .cp-select__control {
    @apply space-x-1 flex flex-row justify-between items-center min-h-10 text-left rounded-4 border-px border-gray-300 focus:border-blue-normal focus:outline-none cursor-default hover:cursor-pointer text-base select-none text-gray-650 bg-gray-100;
}

#coupons-plus .cp-select__multi-value {
    @apply bg-gray-150 rounded-4;
}

#coupons-plus .overflow-initial {
    overflow: initial;
}
.\!overflow-initial {
    overflow: initial !important;
}

.\!flex-wrap-initial {
    flex-wrap: initial !important;
}

.no-spin-button::-webkit-inner-spin-button {
    display: none !important;
}

#coupons-plus-admin .react-datepicker__header {
    @apply bg-white border-none font-medium text-gray-750;
}

#coupons-plus-admin .react-datepicker__day--keyboard-selected {
    @apply bg-transparent;
}