@import './badge';

.p-button {
  @apply relative inline-flex cursor-pointer select-none items-center justify-center gap-2 overflow-hidden rounded-md border border-primary bg-primary px-3 py-2 text-primary-contrast transition-colors duration-200 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-primary enabled:hover:border-primary-emphasis enabled:hover:bg-primary-emphasis enabled:active:border-primary-emphasis-alt enabled:active:bg-primary-emphasis-alt disabled:cursor-default;
}

.p-button-icon-right {
  @apply order-1;
}

.p-button-icon-right:dir(rtl) {
  @apply order-[-1];
}

.p-button:not(.p-button-vertical) .p-button-icon:not(.p-button-icon-right):dir(rtl) {
  @apply order-1;
}

.p-button-icon-bottom {
  @apply order-2;
}

.p-button-icon-only {
  @apply w-10 gap-0 px-0;
}

.p-button-icon-only.p-button-rounded {
  @apply h-10 rounded-full;
}

.p-button-icon-only .p-button-label {
  @apply invisible w-0;
}

.p-button-sm {
  @apply px-[0.625rem] py-[0.375rem] text-sm;
}

.p-button-sm .p-button-icon {
  @apply text-sm;
}

.p-button-lg {
  @apply px-[0.875rem] py-[0.625rem] text-[1.125rem];
}

.p-button-lg .p-button-icon {
  @apply text-[1.125rem];
}

.p-button-vertical {
  @apply flex-col;
}

.p-button-label {
  @apply font-medium;
}

.p-button-fluid {
  @apply w-full;
}

.p-button-fluid.p-button-icon-only {
  @apply w-10;
}

.p-button .p-badge {
  @apply h-4 min-w-4 leading-4;
}

.p-button-raised {
  @apply shadow-[0_3px_1px_-2px_rgba(0,0,0,0.2),0_2px_2px_0_rgba(0,0,0,0.14),0_1px_5px_0_rgba(0,0,0,0.12)];
}

.p-button-rounded {
  @apply rounded-[2rem];
}

.p-button-secondary {
  @apply border-surface-100 bg-surface-100 text-surface-600 focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-surface-600 enabled:hover:border-surface-200 enabled:hover:bg-surface-200 enabled:hover:text-surface-700 enabled:active:border-surface-300 enabled:active:bg-surface-300 enabled:active:text-surface-800 dark:border-surface-800 dark:bg-surface-800 dark:text-surface-300 dark:focus-visible:outline-surface-300 dark:enabled:hover:border-surface-700 dark:enabled:hover:bg-surface-700 dark:enabled:hover:text-surface-200 dark:enabled:active:border-surface-600 dark:enabled:active:bg-surface-600 dark:enabled:active:text-surface-100;
}

.p-button-success {
  @apply border-green-500 bg-green-500 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-green-500 enabled:hover:border-green-600 enabled:hover:bg-green-600 enabled:hover:text-white enabled:active:border-green-700 enabled:active:bg-green-700 enabled:active:text-white dark:border-green-400 dark:bg-green-400 dark:text-green-950 dark:focus-visible:outline-green-400 dark:enabled:hover:border-green-300 dark:enabled:hover:bg-green-300 dark:enabled:hover:text-green-950 dark:enabled:active:border-green-200 dark:enabled:active:bg-green-200 dark:enabled:active:text-green-950;
}

.p-button-info {
  @apply border-sky-500 bg-sky-500 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-sky-500 enabled:hover:border-sky-600 enabled:hover:bg-sky-600 enabled:hover:text-white enabled:active:border-sky-700 enabled:active:bg-sky-700 enabled:active:text-white dark:border-sky-400 dark:bg-sky-400 dark:text-sky-950 dark:focus-visible:outline-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:hover:bg-sky-300 dark:enabled:hover:text-sky-950 dark:enabled:active:border-sky-200 dark:enabled:active:bg-sky-200 dark:enabled:active:text-sky-950;
}

.p-button-warn {
  @apply border-orange-500 bg-orange-500 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-orange-500 enabled:hover:border-orange-600 enabled:hover:bg-orange-600 enabled:hover:text-white enabled:active:border-orange-700 enabled:active:bg-orange-700 enabled:active:text-white dark:border-orange-400 dark:bg-orange-400 dark:text-orange-950 dark:focus-visible:outline-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:hover:bg-orange-300 dark:enabled:hover:text-orange-950 dark:enabled:active:border-orange-200 dark:enabled:active:bg-orange-200 dark:enabled:active:text-orange-950;
}

.p-button-help {
  @apply border-purple-500 bg-purple-500 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-purple-500 enabled:hover:border-purple-600 enabled:hover:bg-purple-600 enabled:hover:text-white enabled:active:border-purple-700 enabled:active:bg-purple-700 enabled:active:text-white dark:border-purple-400 dark:bg-purple-400 dark:text-purple-950 dark:focus-visible:outline-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:hover:bg-purple-300 dark:enabled:hover:text-purple-950 dark:enabled:active:border-purple-200 dark:enabled:active:bg-purple-200 dark:enabled:active:text-purple-950;
}

.p-button-help {
  @apply border-purple-500 bg-purple-500 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-purple-500 enabled:hover:border-purple-600 enabled:hover:bg-purple-600 enabled:hover:text-white enabled:active:border-purple-700 enabled:active:bg-purple-700 enabled:active:text-white dark:border-purple-400 dark:bg-purple-400 dark:text-purple-950 dark:focus-visible:outline-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:hover:bg-purple-300 dark:enabled:hover:text-purple-950 dark:enabled:active:border-purple-200 dark:enabled:active:bg-purple-200 dark:enabled:active:text-purple-950;
}

.p-button-danger {
  @apply border-red-500 bg-red-500 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-red-500 enabled:hover:border-red-600 enabled:hover:bg-red-600 enabled:hover:text-white enabled:active:border-red-700 enabled:active:bg-red-700 enabled:active:text-white dark:border-red-400 dark:bg-red-400 dark:text-red-950 dark:focus-visible:outline-red-400 dark:enabled:hover:border-red-300 dark:enabled:hover:bg-red-300 dark:enabled:hover:text-red-950 dark:enabled:active:border-red-200 dark:enabled:active:bg-red-200 dark:enabled:active:text-red-950;
}

.p-button-contrast {
  @apply border-surface-950 bg-surface-950 text-white focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-surface-950 enabled:hover:border-surface-900 enabled:hover:bg-surface-900 enabled:hover:text-white enabled:active:border-surface-800 enabled:active:bg-surface-800 enabled:active:text-white dark:border-surface-100 dark:bg-surface-0 dark:text-surface-950 dark:focus-visible:outline-surface-0 dark:enabled:hover:border-surface-200 dark:enabled:hover:bg-surface-100 dark:enabled:hover:text-surface-950 dark:enabled:active:border-surface-300 dark:enabled:active:bg-surface-200 dark:enabled:active:text-surface-950;
}

.p-button-outlined {
  @apply border-primary-200 bg-transparent text-primary enabled:hover:border-primary-200 enabled:hover:bg-primary-50 enabled:hover:text-primary enabled:active:border-primary-200 enabled:active:bg-primary-100 enabled:active:text-primary dark:border-primary-700 dark:bg-transparent dark:text-primary dark:enabled:hover:border-primary-700 dark:enabled:hover:bg-primary/5 dark:enabled:hover:text-primary dark:enabled:active:border-primary-700 dark:enabled:active:bg-primary/15 dark:enabled:active:text-primary;
}

.p-button-outlined.p-button-secondary {
  @apply border-surface-200 bg-transparent text-surface-500 enabled:hover:border-surface-200 enabled:hover:bg-surface-50 enabled:hover:text-surface-500 enabled:active:border-surface-200 enabled:active:bg-surface-100 enabled:active:text-surface-500 dark:border-surface-700 dark:bg-transparent dark:text-surface-400 dark:enabled:hover:border-surface-700 dark:enabled:hover:bg-white/5 dark:enabled:hover:text-surface-400 dark:enabled:active:border-surface-700 dark:enabled:active:bg-white/15 dark:enabled:active:text-surface-400;
}

.p-button-outlined.p-button-success {
  @apply border-green-200 bg-transparent text-green-500 enabled:hover:border-green-200 enabled:hover:bg-green-50 enabled:hover:text-green-500 enabled:active:border-green-200 enabled:active:bg-green-100 enabled:active:text-green-500 dark:border-green-700 dark:bg-transparent dark:text-green-400 dark:enabled:hover:border-green-700 dark:enabled:hover:bg-green-400/5 dark:enabled:hover:text-green-400 dark:enabled:active:border-green-700 dark:enabled:active:bg-green-400/15 dark:enabled:active:text-green-400;
}

.p-button-outlined.p-button-info {
  @apply border-sky-200 bg-transparent text-sky-500 enabled:hover:border-sky-200 enabled:hover:bg-sky-50 enabled:hover:text-sky-500 enabled:active:border-sky-200 enabled:active:bg-sky-100 enabled:active:text-sky-500 dark:border-sky-700 dark:bg-transparent dark:text-sky-400 dark:enabled:hover:border-sky-700 dark:enabled:hover:bg-sky-400/5 dark:enabled:hover:text-sky-400 dark:enabled:active:border-sky-700 dark:enabled:active:bg-sky-400/15 dark:enabled:active:text-sky-400;
}

.p-button-outlined.p-button-warn {
  @apply border-orange-200 bg-transparent text-orange-500 enabled:hover:border-orange-200 enabled:hover:bg-orange-50 enabled:hover:text-orange-500 enabled:active:border-orange-200 enabled:active:bg-orange-100 enabled:active:text-orange-500 dark:border-orange-700 dark:bg-transparent dark:text-orange-400 dark:enabled:hover:border-orange-700 dark:enabled:hover:bg-orange-400/5 dark:enabled:hover:text-orange-400 dark:enabled:active:border-orange-700 dark:enabled:active:bg-orange-400/15 dark:enabled:active:text-orange-400;
}

.p-button-outlined.p-button-help {
  @apply border-purple-200 bg-transparent text-purple-500 enabled:hover:border-purple-200 enabled:hover:bg-purple-50 enabled:hover:text-purple-500 enabled:active:border-purple-200 enabled:active:bg-purple-100 enabled:active:text-purple-500 dark:border-purple-700 dark:bg-transparent dark:text-purple-400 dark:enabled:hover:border-purple-700 dark:enabled:hover:bg-purple-400/5 dark:enabled:hover:text-purple-400 dark:enabled:active:border-purple-700 dark:enabled:active:bg-purple-400/15 dark:enabled:active:text-purple-400;
}

.p-button-outlined.p-button-danger {
  @apply border-red-200 bg-transparent text-red-500 enabled:hover:border-red-200 enabled:hover:bg-red-50 enabled:hover:text-red-500 enabled:active:border-red-200 enabled:active:bg-red-100 enabled:active:text-red-500 dark:border-red-700 dark:bg-transparent dark:text-red-400 dark:enabled:hover:border-red-700 dark:enabled:hover:bg-red-400/5 dark:enabled:hover:text-red-400 dark:enabled:active:border-red-700 dark:enabled:active:bg-red-400/15 dark:enabled:active:text-red-400;
}

.p-button-outlined.p-button-contrast {
  @apply border-surface-700 bg-transparent text-surface-950 enabled:hover:border-surface-700 enabled:hover:bg-surface-50 enabled:hover:text-surface-950 enabled:active:border-surface-700 enabled:active:bg-surface-100 enabled:active:text-surface-950 dark:border-surface-500 dark:bg-transparent dark:text-surface-0 dark:enabled:hover:border-surface-500 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 dark:enabled:active:border-surface-500 dark:enabled:active:bg-surface-700 dark:enabled:active:text-surface-0;
}

.p-button-outlined.p-button-plain {
  @apply border-surface-200 bg-transparent text-surface-700 enabled:hover:border-surface-200 enabled:hover:bg-surface-50 enabled:hover:text-surface-700 enabled:active:border-surface-200 enabled:active:bg-surface-100 enabled:active:text-surface-700 dark:border-surface-600 dark:bg-transparent dark:text-surface-0 dark:enabled:hover:border-surface-600 dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 dark:enabled:active:border-surface-600 dark:enabled:active:bg-surface-700 dark:enabled:active:text-surface-0;
}

.p-button-text {
  @apply border-transparent bg-transparent text-primary enabled:hover:border-transparent enabled:hover:bg-primary-50 enabled:hover:text-primary enabled:active:border-transparent enabled:active:bg-primary-100 enabled:active:text-primary dark:border-transparent dark:bg-transparent dark:text-primary dark:enabled:hover:border-transparent dark:enabled:hover:bg-primary/5 dark:enabled:hover:text-primary dark:enabled:active:border-transparent dark:enabled:active:bg-primary/15 dark:enabled:active:text-primary;
}

.p-button-text.p-button-secondary {
  @apply border-transparent bg-transparent text-surface-500 enabled:hover:border-transparent enabled:hover:bg-surface-50 enabled:hover:text-surface-500 enabled:active:border-transparent enabled:active:bg-surface-100 enabled:active:text-surface-500 dark:border-transparent dark:bg-transparent dark:text-surface-400 dark:enabled:hover:border-transparent dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-400 dark:enabled:active:border-transparent dark:enabled:active:bg-surface-700 dark:enabled:active:text-surface-400;
}

.p-button-text.p-button-success {
  @apply border-transparent bg-transparent text-green-500 enabled:hover:border-transparent enabled:hover:bg-green-50 enabled:hover:text-green-500 enabled:active:border-transparent enabled:active:bg-green-100 enabled:active:text-green-500 dark:border-transparent dark:bg-transparent dark:text-green-400 dark:enabled:hover:border-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:hover:text-green-400 dark:enabled:active:border-transparent dark:enabled:active:bg-green-400/15 dark:enabled:active:text-green-400;
}

.p-button-text.p-button-info {
  @apply border-transparent bg-transparent text-sky-500 enabled:hover:border-transparent enabled:hover:bg-sky-50 enabled:hover:text-sky-500 enabled:active:border-transparent enabled:active:bg-sky-100 enabled:active:text-sky-500 dark:border-transparent dark:bg-transparent dark:text-sky-400 dark:enabled:hover:border-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:hover:text-sky-400 dark:enabled:active:border-transparent dark:enabled:active:bg-sky-400/15 dark:enabled:active:text-sky-400;
}

.p-button-text.p-button-warn {
  @apply border-transparent bg-transparent text-orange-500 enabled:hover:border-transparent enabled:hover:bg-orange-50 enabled:hover:text-orange-500 enabled:active:border-transparent enabled:active:bg-orange-100 enabled:active:text-orange-500 dark:border-transparent dark:bg-transparent dark:text-orange-400 dark:enabled:hover:border-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:hover:text-orange-400 dark:enabled:active:border-transparent dark:enabled:active:bg-orange-400/15 dark:enabled:active:text-orange-400;
}

.p-button-text.p-button-help {
  @apply border-transparent bg-transparent text-purple-500 enabled:hover:border-transparent enabled:hover:bg-purple-50 enabled:hover:text-purple-500 enabled:active:border-transparent enabled:active:bg-purple-100 enabled:active:text-purple-500 dark:border-transparent dark:bg-transparent dark:text-purple-400 dark:enabled:hover:border-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:hover:text-purple-400 dark:enabled:active:border-transparent dark:enabled:active:bg-purple-400/15 dark:enabled:active:text-purple-400;
}

.p-button-text.p-button-danger {
  @apply border-transparent bg-transparent text-red-500 enabled:hover:border-transparent enabled:hover:bg-red-50 enabled:hover:text-red-500 enabled:active:border-transparent enabled:active:bg-red-100 enabled:active:text-red-500 dark:border-transparent dark:bg-transparent dark:text-red-400 dark:enabled:hover:border-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:hover:text-red-400 dark:enabled:active:border-transparent dark:enabled:active:bg-red-400/15 dark:enabled:active:text-red-400;
}

.p-button-text.p-button-plain {
  @apply border-transparent bg-transparent text-surface-700 enabled:hover:border-transparent enabled:hover:bg-surface-50 enabled:hover:text-surface-700 enabled:active:border-transparent enabled:active:bg-surface-100 enabled:active:text-surface-700 dark:border-transparent dark:bg-transparent dark:text-surface-0 dark:enabled:hover:border-transparent dark:enabled:hover:bg-surface-800 dark:enabled:hover:text-surface-0 dark:enabled:active:border-transparent dark:enabled:active:bg-surface-700 dark:enabled:active:text-surface-0;
}

.p-button-link {
  @apply border-transparent bg-transparent text-primary enabled:hover:border-transparent enabled:hover:bg-transparent enabled:hover:text-primary enabled:active:border-transparent enabled:active:bg-transparent enabled:active:text-primary;
}

.p-button-link:not(:disabled):hover .p-button-label {
  @apply underline;
}
