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

/*
 * Fix Tailwind conflicts with WordPress admin classes.
 * Tailwind's .inline { display: inline } breaks WordPress notice styling.
 * WordPress uses .notice.inline to display notices inline in the page flow.
 */
.notice.inline {
  display: block !important;
}

/* Restore WordPress admin link colors that Tailwind resets */
/* Exclude links inside our settings UI that have explicit styling */
.wrap a:not(.openicon-settings-ui a),
.notice a,
.acf-fields a {
  color: #2271b1;
}
.wrap a:hover:not(.openicon-settings-ui a:hover),
.notice a:hover,
.acf-fields a:hover {
  color: #135e96;
}

/* Ensure WP admin doesn't override our custom color input */
input[data-openicon-colorpicker] {
  @apply h-10 w-20 rounded-md border border-zinc-300 bg-white p-1 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

/* Toast animations */
.openicon-toast {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.openicon-toast[data-state='open'] {
  animation-name: toastEnter;
  animation-duration: 0.3s;
}

.openicon-toast[data-state='closed'] {
  animation-name: toastExit;
  animation-duration: 0.2s;
}

@keyframes toastEnter {
  0% {
    opacity: 0;
    transform: translateY(-8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastExit {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}