petal_components

/* Container */

.pc-container {
  @apply w-full mx-auto sm:px-6 lg:px-8;
}
.pc-container--sm {
  @apply max-w-3xl;
}
.pc-container--md {
  @apply max-w-5xl;
}
.pc-container--lg {
  @apply max-w-7xl;
}
.pc-container--xl {
  @apply max-w-[85rem];
}
.pc-container--full {
  @apply max-w-full;
}
.pc-container--mobile-padded {
  @apply px-4;
}

/* Buttons (New) */

.pc-button {
  @apply inline-flex items-center justify-center font-medium transition duration-150 ease-in-out border rounded-md focus:outline-none;
}

/* Buttons - sizes */

.pc-button--xs {
  @apply text-xs leading-4 px-2.5 py-1.5;
}
.pc-button--sm {
  @apply px-3 py-2 text-sm leading-4;
}
.pc-button--md {
  @apply px-4 py-2 text-sm leading-5;
}
.pc-button--lg {
  @apply px-4 py-2 text-base leading-6;
}
.pc-button--xl {
  @apply px-6 py-3 text-base leading-6;
}

/* Buttons - border radius */
.pc-button--radius-none {
  @apply rounded-none;
}

.pc-button--radius-sm {
  @apply rounded;
}

.pc-button--radius-md {
  @apply rounded-md;
}

.pc-button--radius-lg {
  @apply rounded-lg;
}

.pc-button--radius-xl {
  @apply rounded-xl;
}

.pc-button--radius-full {
  @apply rounded-full;
}

/* Buttons - colors */

.pc-button--primary {
  @apply text-white border-transparent bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50;
}
.pc-button--primary-light {
  @apply bg-primary-100 text-primary-800 border-primary-100 hover:bg-primary-200 hover:border-primary-200 active:bg-primary-300 focus:bg-primary-200 dark:bg-primary-200 dark:border-primary-200 dark:hover:border-primary-300 dark:text-primary-800 dark:hover:bg-primary-300 dark:active:bg-primary-400 dark:active:border-primary-400;
}
.pc-button--primary-outline {
  @apply border-primary-400 dark:border-primary-400 dark:active:border-primary-400 dark:hover:border-primary-300 dark:hover:text-primary-300 dark:hover:bg-transparent dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-primary-700 active:bg-primary-200 hover:bg-primary-50 focus:border-primary-700 focus:shadow-primary-500/50;
}
.pc-button--primary-inverted {
  @apply border-primary-400 dark:border-primary-400 dark:hover:border-primary-700 dark:hover:text-white dark:hover:bg-primary-700 dark:text-primary-400 hover:border-primary-600 text-primary-600 hover:text-white active:bg-primary-700 hover:bg-primary-600 focus:border-primary-700 focus:shadow-primary-500/50;
}
.pc-button--primary-shadow {
  @apply text-white border-transparent shadow-xl bg-primary-600 hover:bg-primary-700 focus:bg-primary-700 active:bg-primary-800 focus:shadow-primary-500/50 shadow-primary-500/30 dark:hover:shadow-primary-600/30 dark:focus:shadow-primary-600/30 dark:active:shadow-primary-700/30;
}
.pc-button--primary-ghost {
  @apply bg-transparent border-transparent text-primary-800 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 focus:bg-transparent dark:text-primary-300 dark:hover:bg-primary-900 dark:hover:text-primary-300 dark:active:bg-primary-700 dark:focus:bg-transparent;
}
.pc-button--secondary {
  @apply text-white border-transparent bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50;
}
.pc-button--secondary-light {
  @apply bg-secondary-100 text-secondary-800 border-secondary-100 hover:bg-secondary-200 hover:border-secondary-200 active:bg-secondary-300 focus:bg-secondary-200 dark:bg-secondary-200 dark:border-secondary-200 dark:hover:border-secondary-300 dark:text-secondary-800 dark:hover:bg-secondary-300 dark:active:bg-secondary-400 dark:active:border-secondary-400;
}
.pc-button--secondary-outline {
  @apply border-secondary-400 dark:border-secondary-400 dark:active:border-secondary-400 dark:hover:border-secondary-300 dark:hover:text-secondary-300 dark:hover:bg-transparent dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-secondary-700 active:bg-secondary-200 hover:bg-secondary-50 focus:border-secondary-700 focus:shadow-secondary-500/50;
}
.pc-button--secondary-inverted {
  @apply border-secondary-400 dark:border-secondary-400 dark:hover:border-secondary-700 dark:hover:text-white dark:hover:bg-secondary-700 dark:text-secondary-400 hover:border-secondary-600 text-secondary-600 hover:text-white active:bg-secondary-700 hover:bg-secondary-600 focus:border-secondary-700 focus:shadow-secondary-500/50;
}
.pc-button--secondary-shadow {
  @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:focus:shadow-secondary-600/30 dark:active:shadow-secondary-700/30;
}
.pc-button--secondary-ghost {
  @apply bg-transparent border-transparent text-secondary-800 hover:bg-secondary-100 hover:text-secondary-800 active:bg-secondary-200 focus:bg-transparent dark:text-secondary-300 dark:hover:bg-secondary-900 dark:hover:text-secondary-300 dark:active:bg-secondary-700 dark:focus:bg-transparent;
}
.pc-button--white {
  @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
}
.pc-button--white-outline {
  @apply text-gray-600 border-gray-400 dark:border-gray-300 dark:active:border-gray-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-gray-200 dark:hover:text-gray-200 dark:hover:bg-transparent dark:text-gray-300 hover:border-gray-600 hover:text-gray-700 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600;
}
.pc-button--white-inverted {
  @apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white focus:border-gray-700 focus:shadow-gray-500/50;
}
.pc-button--white-shadow {
  @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30;
}
.pc-button--pure-white {
  @apply text-gray-700 bg-white border-transparent border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 focus:outline-none focus:border-transparent focus:bg-gray-100 focus:text-gray-900 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent;
}
.pc-button--info {
  @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700;
}
.pc-button--info-light {
  @apply bg-info-100 text-info-800 border-info-100 hover:bg-info-200 hover:border-info-200 active:bg-info-300 focus:bg-info-200 dark:bg-info-200 dark:border-info-200 dark:hover:border-info-300 dark:text-info-800 dark:hover:bg-info-300 dark:active:bg-info-400 dark:active:border-info-400;
}
.pc-button--info-outline {
  @apply text-info-600 border-info-400 dark:border-info-400 dark:active:border-info-400 dark:hover:border-info-300 dark:hover:text-info-300 dark:hover:bg-transparent dark:text-info-400 hover:border-info-600 hover:text-info-700 active:border-info-600 focus:text-info-600 active:text-info-700 active:bg-info-100 hover:bg-info-50 focus:border-info-700;
}
.pc-button--info-inverted {
  @apply text-info-600 border-info-400 dark:border-info-400 dark:hover:border-info-700 dark:hover:text-white dark:hover:bg-info-700 dark:text-info-400 hover:border-info-600 hover:text-white active:bg-info-800 hover:bg-info-600 focus:border-info-700 focus:shadow-info-500/50;
}
.pc-button--info-shadow {
  @apply text-white border-transparent shadow-xl bg-info-600 hover:bg-info-700 focus:bg-info-700 active:bg-info-800 focus:shadow-info-500/50 shadow-info-500/30 dark:hover:shadow-info-600/30 dark:focus:shadow-info-600/30 dark:active:shadow-info-700/30;
}
.pc-button--info-ghost {
  @apply bg-transparent border-transparent text-info-800 hover:bg-info-100 hover:text-info-800 active:bg-info-200 focus:bg-transparent dark:text-info-300 dark:hover:bg-info-900 dark:hover:text-info-300 dark:active:bg-info-700 dark:focus:bg-transparent;
}
.pc-button--success {
  @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700;
}
.pc-button--success-light {
  @apply bg-success-100 text-success-800 border-success-100 hover:bg-success-200 hover:border-success-200 active:bg-success-300 focus:bg-success-200 dark:bg-success-200 dark:border-success-200 dark:hover:border-success-300 dark:text-success-800 dark:hover:bg-success-300 dark:active:bg-success-400 dark:active:border-success-400;
}
.pc-button--success-outline {
  @apply text-success-600 border-success-400 dark:border-success-400 dark:active:border-success-500 dark:hover:border-success-300 dark:hover:text-success-300 dark:hover:bg-transparent dark:text-success-400 hover:border-success-600 hover:text-success-700 active:border-success-600 focus:text-success-600 active:text-success-700 active:bg-success-100 hover:bg-success-50 focus:border-success-700;
}
.pc-button--success-inverted {
  @apply text-success-600 border-success-400 dark:border-success-400 dark:hover:border-success-700 dark:hover:text-white dark:hover:bg-success-700 dark:text-success-400 hover:border-success-600 hover:text-white active:bg-success-800 hover:bg-success-600 focus:border-success-700 focus:shadow-success-500/50;
}
.pc-button--success-shadow {
  @apply text-white border-transparent shadow-xl bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700 focus:shadow-success-500/50 shadow-success-500/30 dark:hover:shadow-success-600/30 dark:focus:shadow-success-600/30 dark:active:shadow-success-700/30;
}
.pc-button--success-ghost {
  @apply bg-transparent border-transparent text-success-800 hover:bg-success-100 hover:text-success-800 active:bg-success-200 focus:bg-transparent dark:text-success-300 dark:hover:bg-success-900 dark:hover:text-success-300 dark:active:bg-success-700 dark:focus:bg-transparent;
}
.pc-button--warning {
  @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 focus:bg-warning-700;
}
.pc-button--warning-light {
  @apply bg-warning-100 text-warning-800 border-warning-100 hover:bg-warning-200 hover:border-warning-200 active:bg-warning-300 focus:bg-warning-200 dark:bg-warning-200 dark:border-warning-200 dark:hover:border-warning-300 dark:text-warning-800 dark:hover:bg-warning-300 dark:active:bg-warning-400 dark:active:border-warning-400;
}
.pc-button--warning-outline {
  @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:active:border-warning-500 dark:hover:border-warning-300 dark:hover:text-warning-300 dark:hover:bg-transparent dark:text-warning-400 hover:border-warning-600 hover:text-warning-700 active:border-warning-600 focus:text-warning-600 active:text-warning-700 active:bg-warning-100 hover:bg-warning-50 focus:border-warning-700;
}
.pc-button--warning-inverted {
  @apply text-warning-600 border-warning-400 dark:border-warning-400 dark:hover:border-warning-700 dark:hover:text-white dark:hover:bg-warning-700 dark:text-warning-400 hover:border-warning-600 hover:text-white active:bg-warning-800 hover:bg-warning-600 focus:border-warning-700 focus:shadow-warning-500/50;
}
.pc-button--warning-shadow {
  @apply text-white border-transparent shadow-xl bg-warning-600 hover:bg-warning-700 focus:bg-warning-700 active:bg-warning-800 focus:shadow-warning-500/50 shadow-warning-500/30 dark:hover:shadow-warning-600/30 dark:focus:shadow-warning-600/30 dark:active:shadow-warning-700/30;
}
.pc-button--warning-ghost {
  @apply bg-transparent border-transparent text-warning-800 hover:bg-warning-100 hover:text-warning-800 active:bg-warning-200 focus:bg-transparent dark:text-warning-300 dark:hover:bg-warning-900 dark:hover:text-warning-300 dark:active:bg-warning-700 dark:focus:bg-transparent;
}
.pc-button--danger {
  @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 focus:bg-danger-700;
}
.pc-button--danger-light {
  @apply bg-danger-100 text-danger-800 border-danger-100 hover:bg-danger-200 hover:border-danger-200 active:bg-danger-300 focus:bg-danger-200 dark:bg-danger-200 dark:border-danger-200 dark:hover:border-danger-300 dark:text-danger-800 dark:hover:bg-danger-300 dark:active:bg-danger-400 dark:active:border-danger-400;
}
.pc-button--danger-outline {
  @apply text-danger-600 border-danger-400 dark:active:border-danger-400 dark:border-danger-400 dark:hover:border-danger-300 dark:hover:text-danger-300 dark:hover:bg-transparent dark:text-danger-400 hover:border-danger-600 hover:text-danger-700 active:bg-danger-200 active:border-danger-700 hover:bg-danger-50 focus:border-danger-700;
}
.pc-button--danger-inverted {
  @apply text-danger-600 border-danger-400 dark:border-danger-400 dark:hover:border-danger-700 dark:hover:text-white dark:hover:bg-danger-700 dark:text-danger-400 hover:border-danger-600 hover:text-white active:bg-danger-800 hover:bg-danger-600 focus:border-danger-700 focus:shadow-danger-500/50;
}
.pc-button--danger-shadow {
  @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 focus:bg-danger-700 active:bg-danger-800 focus:shadow-danger-500/50 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:focus:shadow-danger-600/30 dark:active:shadow-danger-700/30;
}
.pc-button--danger-ghost {
  @apply bg-transparent border-transparent text-danger-800 hover:bg-danger-100 hover:text-danger-800 active:bg-danger-200 focus:bg-transparent dark:text-danger-300 dark:hover:bg-danger-900 dark:hover:text-danger-300 dark:active:bg-danger-700 dark:focus:bg-transparent;
}
.pc-button--gray {
  @apply text-white bg-gray-600 border-transparent active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700;
}
.pc-button--gray-light {
  @apply text-gray-800 bg-gray-100 border-gray-100 hover:bg-gray-200 hover:border-gray-200 active:bg-gray-300 focus:bg-gray-200 dark:bg-gray-200 dark:border-gray-200 dark:hover:border-gray-300 dark:text-gray-800 dark:hover:bg-gray-300 dark:active:bg-gray-400 dark:active:border-gray-400;
}
.pc-button--gray-outline {
  @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-300 dark:active:border-gray-400 dark:hover:text-gray-300 dark:hover:bg-transparent dark:text-gray-400 hover:border-gray-600 hover:text-gray-700 active:bg-gray-200 active:border-gray-700 hover:bg-gray-50 focus:border-gray-700;
}
.pc-button--gray-inverted {
  @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:text-gray-400 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 focus:border-gray-700 focus:shadow-gray-500/50;
}
.pc-button--gray-shadow {
  @apply text-white bg-gray-600 border-transparent shadow-xl active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700 focus:shadow-gray-500/50 shadow-gray-500/30 dark:hover:shadow-gray-600/30 dark:focus:shadow-gray-600/30 dark:active:shadow-gray-700/30;
}
.pc-button--gray-ghost {
  @apply text-gray-800 bg-transparent border-transparent hover:bg-gray-100 hover:text-gray-800 active:bg-gray-200 focus:bg-transparent dark:text-gray-300 dark:hover:bg-gray-800 dark:hover:text-gray-300 dark:active:bg-gray-700 dark:focus:bg-transparent;
}
.pc-button--light {
  @apply text-gray-900 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800;
}
.pc-button--light-outline {
  @apply text-gray-900 border-gray-300 dark:hover:bg-transparent hover:border-gray-400 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600 dark:text-white dark:border-gray-600 dark:active:border-gray-600 dark:hover:border-gray-500 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent;
}
.pc-button--light-inverted {
  @apply text-gray-900 border-gray-300 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 focus:border-gray-700 focus:shadow-gray-500/50 dark:hover:text-black dark:hover:bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:border-white dark:active:bg-gray-300 dark:active:border-gray-300 dark:focus:shadow-gray-600/50;
}
.pc-button--light-shadow {
  @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 shadow-gray-500/30 dark:shadow-gray-600/30 dark:hover:shadow-gray-500/30 dark:focus:shadow-gray-500/30 dark:active:shadow-gray-600/30;
}
.pc-button--dark {
  @apply text-white border-transparent bg-gray-950 dark:text-gray-950 dark:bg-white dark:hover:text-gray-900 dark:hover:bg-gray-100 dark:focus:outline-none dark:focus:bg-gray-200 dark:focus:text-gray-900 dark:active:bg-gray-300 dark:active:text-black hover:bg-gray-800 active:bg-gray-900;
}
.pc-button--dark-outline {
  @apply bg-white dark:bg-gray-950 dark:border-white text-gray-950 border-gray-950 dark:hover:bg-gray-950 dark:hover:border-gray-300 dark:active:bg-gray-950 hover:bg-gray-50 dark:focus:bg-gray-950 dark:active:border-gray-400 dark:text-white active:border-gray-600 hover:border-gray-500 active:bg-gray-100 focus:bg-transparent;
}
.pc-button--dark-inverted {
  @apply border-gray-950 text-gray-950 hover:border-transparent hover:text-white active:bg-gray-800 hover:bg-gray-950 focus:shadow-gray-500/50 dark:hover:bg-white dark:hover:text-black dark:bg-gray-950 dark:text-white dark:active:bg-gray-200 dark:active:border-gray-200 dark:border-white;
}
.pc-button--dark-shadow {
  @apply text-white border-transparent shadow-xl dark:text-gray-950 bg-gray-950 active:bg-gray-900 hover:bg-gray-800 focus:bg-gray-800 focus:shadow-gray-500/50 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30;
}

/* Buttons - loading */

.pc-button--loading {
  @apply flex items-center gap-2 cursor-not-allowed whitespace-nowrap;
}

.pc-button__spinner-icon {
  @apply animate-spin;
}

.pc-button__spinner-icon--xs {
  @apply w-3 h-3;
}
.pc-button__spinner-icon--sm {
  @apply w-4 h-4;
}
.pc-button__spinner-icon--md {
  @apply w-5 h-5;
}
.pc-button__spinner-icon--lg {
  @apply w-5 h-5;
}
.pc-button__spinner-icon--xl {
  @apply w-6 h-6;
}

/* Buttons - with icon */

.pc-button--with-icon {
  @apply flex items-center gap-2 whitespace-nowrap;
}

/* Icon Button */

.pc-icon-button {
  @apply inline-block p-2;
}

.pc-icon-button__inner {
  @apply flex flex-col items-center;
}

.pc-icon-button__inner--tooltip {
  @apply relative;
}

.pc-icon-button__tooltip {
  @apply absolute flex-col items-center invisible mb-6 transition-opacity duration-300 -translate-y-full opacity-0 -top-1 group-hover/pc-icon-button:flex group-hover/pc-icon-button:visible group-hover/pc-icon-button:opacity-100;
}

.pc-icon-button__tooltip__text {
  @apply relative z-10 p-2 text-xs leading-none text-white bg-gray-900 rounded-sm shadow-lg whitespace-nowrap dark:bg-gray-700;
}

.pc-icon-button__tooltip__arrow {
  @apply w-3 h-3 -mt-2 rotate-45 bg-gray-900 dark:bg-gray-700;
}

/* Icon Buttons - colors */

.pc-icon-button--primary {
  @apply text-primary-600 dark:text-primary-500;
}
.pc-icon-button--secondary {
  @apply text-secondary-600 dark:text-secondary-500;
}
.pc-icon-button--gray {
  @apply text-gray-600 dark:text-gray-500;
}
.pc-icon-button--info {
  @apply text-info-600 dark:text-info-500;
}
.pc-icon-button--success {
  @apply text-success-600 dark:text-success-500;
}
.pc-icon-button--warning {
  @apply text-warning-600 dark:text-warning-500;
}
.pc-icon-button--danger {
  @apply text-danger-600 dark:text-danger-500;
}

/* Icon Buttons - background colors */

.pc-icon-button-bg--primary {
  @apply hover:bg-primary-50 dark:hover:bg-gray-800;
}
.pc-icon-button-bg--secondary {
  @apply hover:bg-secondary-50 dark:hover:bg-gray-800;
}
.pc-icon-button-bg--gray {
  @apply hover:bg-gray-100 dark:hover:bg-gray-800;
}
.pc-icon-button-bg--info {
  @apply hover:bg-info-50 dark:hover:bg-gray-800;
}
.pc-icon-button-bg--success {
  @apply hover:bg-success-50 dark:hover:bg-gray-800;
}
.pc-icon-button-bg--warning {
  @apply hover:bg-warning-50 dark:hover:bg-gray-800;
}
.pc-icon-button-bg--danger {
  @apply hover:bg-danger-50 dark:hover:bg-gray-800;
}

/* Icon Button - sizes */

.pc-icon-button--xs {
  @apply w-9 h-9;
}
.pc-icon-button--sm {
  @apply w-10 h-10;
}
.pc-icon-button--md {
  @apply w-11 h-11;
}
.pc-icon-button--lg {
  @apply w-12 h-12;
}
.pc-icon-button--xl {
  @apply w-14 h-14;
}

/* Icon Buttons - border radius */
.pc-icon-button--radius-none {
  @apply rounded-none;
}

.pc-icon-button--radius-sm {
  @apply rounded;
}

.pc-icon-button--radius-md {
  @apply rounded-md;
}

.pc-icon-button--radius-lg {
  @apply rounded-lg;
}

.pc-icon-button--radius-xl {
  @apply rounded-xl;
}

.pc-icon-button--radius-full {
  @apply rounded-full;
}

/* Icon Button - loading */

.pc-icon-button-spinner--xs {
  @apply w-5 h-5;
}
.pc-icon-button-spinner--sm {
  @apply w-6 h-6;
}
.pc-icon-button-spinner--md {
  @apply w-7 h-7;
}
.pc-icon-button-spinner--lg {
  @apply w-8 h-8;
}
.pc-icon-button-spinner--xl {
  @apply w-10 h-10;
}

/* Button - disabled */

.pc-button--disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Button Group */

.pc-button-group {
  @apply flex -space-x-px;
}

/* Button Group - Buttons */

.pc-button-group__button {
  @apply inline-flex items-center justify-center;
}

/* Button Group - Default Styles */

.pc-button-group__button--default-styles {
  @apply whitespace-nowrap;
  @apply focus:ring-gray-200 focus:z-10;
  @apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
  @apply disabled:pointer-events-none disabled:opacity-50;
}

/* Button Group - Default Background and Border Styles */

.pc-button-group__button--bg-default {
  @apply bg-white hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-800;
  @apply text-gray-800 hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-300;
}

.pc-button-group__button--border-default {
  @apply border border-gray-200 dark:border-gray-800;
}

/* Button Group - Button Sizes */

.pc-button-group__button--xs {
  @apply text-xs px-2.5 py-1.5 leading-4;
}

.pc-button-group__button--sm {
  @apply px-3 py-2 text-sm leading-4;
}

.pc-button-group__button--md {
  @apply px-4 py-2 text-sm leading-5;
}

.pc-button-group__button--lg {
  @apply px-4 py-2 text-base leading-6;
}

.pc-button-group__button--xl {
  @apply px-6 py-3 text-base leading-6;
}

/* Button Group - Font Weights */

.pc-button-group__button--font-normal {
  @apply font-normal;
}

.pc-button-group__button--font-medium {
  @apply font-medium;
}

.pc-button-group__button--font-semibold {
  @apply font-semibold;
}

.pc-button-group__button--font-bold {
  @apply font-bold;
}

/* Button Group - Button Positions */

.pc-button-group__button--rounded {
  @apply rounded-md;
}

.pc-button-group__button--rounded-r-none {
  @apply rounded-r-none rounded-l-md;
}

.pc-button-group__button--rounded-l-none {
  @apply rounded-l-none rounded-r-md;
}

.pc-button-group__button--rounded-none {
  @apply rounded-none;
}

/* Typography */

.pc-h1 {
  @apply text-4xl font-extrabold leading-10 sm:text-5xl sm:tracking-tight lg:text-6xl;
}
.pc-h2 {
  @apply text-2xl font-extrabold leading-10 sm:text-3xl;
}
.pc-h3 {
  @apply text-xl font-bold leading-7 sm:text-2xl;
}
.pc-h4 {
  @apply text-lg font-bold leading-6;
}
.pc-h5 {
  @apply text-lg font-medium leading-6;
}
.pc-heading--color {
  @apply text-gray-900 dark:text-white;
}
.pc-heading--underline {
  @apply pb-2 border-b border-gray-200;
}
.pc-heading--margin {
  @apply mb-3;
}
.pc-heading--margin {
  @apply mb-3;
}
.pc-text {
  @apply leading-5 text-gray-700 dark:text-gray-300;
}
.pc-p--margin {
  @apply mb-2;
}

/* Badges */

.pc-badge {
  @apply inline-flex items-center justify-center border rounded focus:outline-none;
}

/* Badges - with icon */

.pc-badge--with-icon {
  @apply flex items-center gap-1 whitespace-nowrap;
}

/* Badges - sizes */

.pc-badge--sm {
  @apply text-[0.625rem] font-semibold px-1.5;
}
.pc-badge--md {
  @apply text-xs font-semibold px-2.5 py-0.5;
}
.pc-badge--lg {
  @apply text-sm font-semibold px-2.5 py-0.5;
}

/* Badges - colors */

.pc-badge--primary-light {
  @apply text-primary-800 bg-primary-100 border-primary-100 dark:bg-primary-200 dark:border-primary-200;
}
.pc-badge--primary-soft {
  @apply text-primary-800 bg-primary-100 border-primary-100 dark:border-primary-900 dark:bg-primary-900 dark:text-primary-300;
}
.pc-badge--primary-dark {
  @apply text-white bg-primary-600 border-primary-600;
}
.pc-badge--primary-outline {
  @apply text-primary-600 border-primary-600 dark:text-primary-400 dark:border-primary-400;
}

.pc-badge--secondary-light {
  @apply text-secondary-800 bg-secondary-100 border-secondary-100 dark:bg-secondary-200 dark:border-secondary-200;
}
.pc-badge--secondary-soft {
  @apply text-secondary-800 bg-secondary-100 border-secondary-100 dark:border-secondary-900 dark:bg-secondary-800 dark:text-secondary-300;
}
.pc-badge--secondary-dark {
  @apply text-white bg-secondary-600 border-secondary-600;
}
.pc-badge--secondary-outline {
  @apply border text-secondary-600 border-secondary-600 dark:text-secondary-400 dark:border-secondary-400;
}

.pc-badge--info-light {
  @apply text-info-800 bg-info-100 border-info-100 dark:bg-info-200 dark:border-info-200;
}
.pc-badge--info-soft {
  @apply text-info-800 bg-info-100 border-info-100 dark:border-info-900 dark:bg-info-900 dark:text-info-300;
}
.pc-badge--info-dark {
  @apply text-white bg-info-600 border-info-600;
}
.pc-badge--info-outline {
  @apply border text-info-600 border-info-600 dark:text-info-400 dark:border-info-400;
}

.pc-badge--success-light {
  @apply text-success-800 bg-success-100 border-success-100 dark:bg-success-200 dark:border-success-200;
}
.pc-badge--success-soft {
  @apply text-success-800 bg-success-100 border-success-100 dark:border-success-900 dark:bg-success-900 dark:text-success-300;
}
.pc-badge--success-dark {
  @apply text-white bg-success-600 border-success-600;
}
.pc-badge--success-outline {
  @apply border text-success-600 border-success-600 dark:text-success-400 dark:border-success-400;
}

.pc-badge--warning-light {
  @apply text-warning-800 bg-warning-100 border-warning-100 dark:bg-warning-200 dark:border-warning-200;
}
.pc-badge--warning-soft {
  @apply text-warning-800 bg-warning-100 border-warning-100 dark:border-warning-900 dark:bg-warning-900 dark:text-warning-300;
}
.pc-badge--warning-dark {
  @apply text-white bg-warning-600 border-warning-600;
}
.pc-badge--warning-outline {
  @apply border text-warning-600 border-warning-600 dark:text-warning-400 dark:border-warning-400;
}

.pc-badge--danger-light {
  @apply text-danger-800 bg-danger-100 border-danger-100 dark:bg-danger-200 dark:border-danger-200;
}
.pc-badge--danger-soft {
  @apply text-danger-800 bg-danger-100 border-danger-100 dark:border-danger-900 dark:bg-danger-900 dark:text-danger-300;
}
.pc-badge--danger-dark {
  @apply text-white bg-danger-600 border-danger-600;
}
.pc-badge--danger-outline {
  @apply border text-danger-600 border-danger-600 dark:text-danger-400 dark:border-danger-400;
}

.pc-badge--gray-light {
  @apply text-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-200 dark:border-gray-200;
}
.pc-badge--gray-soft {
  @apply text-gray-800 bg-gray-100 border-gray-100 dark:border-gray-700 dark:bg-gray-700 dark:text-gray-300;
}
.pc-badge--gray-dark {
  @apply text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700;
}
.pc-badge--gray-outline {
  @apply text-gray-600 border border-gray-600 dark:text-gray-400 dark:border-gray-400;
}

/* Alerts */

.pc-alert {
  @apply w-full grow-0;
}
.pc-alert__inner {
  @apply flex items-start justify-between;
}
.pc-alert-base-classes {
  @apply flex items-center w-full gap-3 px-4 py-2 text-sm rounded focus:outline-none;
}
.pc-alert__heading {
  @apply pt-1 font-bold;
}
.pc-alert__label {
  @apply py-1 font-medium;
}
.pc-alert__dismiss-button {
  @apply flex p-2 hover:cursor-pointer hover:rounded;
}

/* Alerts - colors and variants */

/* Info variants */
.pc-alert--info-light {
  @apply text-info-800 bg-info-100 dark:bg-info-200 dark:text-info-800;
}
.pc-alert--info-soft {
  @apply text-info-800 bg-info-100 dark:bg-info-900 dark:text-info-300 dark:border dark:border-info-800;
}
.pc-alert--info-dark {
  @apply text-white bg-info-600;
}
.pc-alert--info-outline {
  @apply bg-white border text-info-600 dark:bg-transparent border-info-600 dark:text-info-400 dark:border-info-400;
}

/* Success variants */
.pc-alert--success-light {
  @apply text-success-800 bg-success-100 dark:bg-success-200 dark:text-success-800;
}
.pc-alert--success-soft {
  @apply text-success-800 bg-success-100 dark:bg-success-900 dark:text-success-300 dark:border dark:border-success-800;
}
.pc-alert--success-dark {
  @apply text-white bg-success-600;
}
.pc-alert--success-outline {
  @apply bg-white border text-success-600 dark:bg-transparent border-success-600 dark:text-success-400 dark:border-success-400;
}

/* Warning variants */
.pc-alert--warning-light {
  @apply text-warning-800 bg-warning-100 dark:bg-warning-200 dark:text-warning-800;
}
.pc-alert--warning-soft {
  @apply text-warning-800 bg-warning-100 dark:bg-warning-900 dark:text-warning-300 dark:border dark:border-warning-800;
}
.pc-alert--warning-dark {
  @apply text-white bg-warning-600;
}
.pc-alert--warning-outline {
  @apply bg-white border text-warning-600 dark:bg-transparent border-warning-600 dark:text-warning-400 dark:border-warning-400;
}

/* Danger variants */
.pc-alert--danger-light {
  @apply text-danger-800 bg-danger-100 dark:bg-danger-200 dark:text-danger-800;
}
.pc-alert--danger-soft {
  @apply text-danger-800 bg-danger-100 dark:bg-danger-900 dark:text-danger-300 dark:border dark:border-danger-800;
}
.pc-alert--danger-dark {
  @apply text-white bg-danger-600;
}
.pc-alert--danger-outline {
  @apply bg-white border text-danger-600 dark:bg-transparent border-danger-600 dark:text-danger-400 dark:border-danger-400;
}

/* Alerts - dismiss button variants */

/* Info dismiss button variants */
.pc-alert__dismiss-button--info-light {
  @apply bg-info-100 dark:bg-info-200 hover:bg-info-200 dark:hover:bg-info-300 hover:text-info-800 dark:hover:text-info-800;
}
.pc-alert__dismiss-button--info-soft {
  @apply bg-info-100 dark:bg-info-900 hover:bg-info-200 dark:hover:bg-info-800 hover:text-info-800 dark:hover:text-info-200;
}
.pc-alert__dismiss-button--info-dark {
  @apply text-white bg-info-600 hover:bg-info-500;
}
.pc-alert__dismiss-button--info-outline {
  @apply hover:bg-info-50 dark:hover:bg-gray-800 text-info-600 dark:text-info-400;
}

/* Success dismiss button variants */
.pc-alert__dismiss-button--success-light {
  @apply bg-success-100 dark:bg-success-200 hover:bg-success-200 dark:hover:bg-success-300 hover:text-success-800 dark:hover:text-success-800;
}
.pc-alert__dismiss-button--success-soft {
  @apply bg-success-100 dark:bg-success-900 hover:bg-success-200 dark:hover:bg-success-800 hover:text-success-800 dark:hover:text-success-200;
}
.pc-alert__dismiss-button--success-dark {
  @apply text-white bg-success-600 hover:bg-success-500;
}
.pc-alert__dismiss-button--success-outline {
  @apply hover:bg-success-50 dark:hover:bg-gray-800 text-success-600 dark:text-success-400;
}

/* Warning dismiss button variants */
.pc-alert__dismiss-button--warning-light {
  @apply bg-warning-100 dark:bg-warning-200 hover:bg-warning-200 dark:hover:bg-warning-300 hover:text-warning-800 dark:hover:text-warning-800;
}
.pc-alert__dismiss-button--warning-soft {
  @apply bg-warning-100 dark:bg-warning-900 hover:bg-warning-200 dark:hover:bg-warning-800 hover:text-warning-800 dark:hover:text-warning-200;
}
.pc-alert__dismiss-button--warning-dark {
  @apply text-white bg-warning-600 hover:bg-warning-500;
}
.pc-alert__dismiss-button--warning-outline {
  @apply hover:bg-warning-50 dark:hover:bg-gray-800 text-warning-600 dark:text-warning-400;
}

/* Danger dismiss button variants */
.pc-alert__dismiss-button--danger-light {
  @apply bg-danger-100 dark:bg-danger-200 hover:bg-danger-200 dark:hover:bg-danger-300 hover:text-danger-800 dark:hover:text-danger-800;
}
.pc-alert__dismiss-button--danger-soft {
  @apply bg-danger-100 dark:bg-danger-900 hover:bg-danger-200 dark:hover:bg-danger-800 hover:text-danger-800 dark:hover:text-danger-200;
}
.pc-alert__dismiss-button--danger-dark {
  @apply text-white bg-danger-600 hover:bg-danger-500;
}
.pc-alert__dismiss-button--danger-outline {
  @apply hover:bg-danger-50 dark:hover:bg-gray-800 text-danger-600 dark:text-danger-400;
}

/* Alerts - with icon */

.pc-alert__icon-container {
  @apply self-start flex-shrink-0 pt-0.5 w-6 h-6;
}

/* Forms */

.pc-form-field-wrapper {
  @apply mb-6;
}

.pc-form-field-wrapper--no-margin {
  @apply mb-0;
}

.pc-form-field-wrapper--error input,
.pc-form-field-wrapper--error select,
.pc-form-field-wrapper--error textarea {
  @apply border-danger-500 focus:border-danger-500 text-danger-900 placeholder-danger-700 bg-danger-50 dark:text-danger-100 dark:placeholder-danger-300 dark:bg-danger-900 focus:ring-danger-500;
}
.pc-form-field-wrapper--error input[type="checkbox"] {
  @apply bg-danger-200 dark:bg-danger-700;
}
.pc-form-field-wrapper--error .pc-switch .pc-switch__fake-input {
  @apply bg-danger-200 border-danger-500 dark:bg-danger-600 dark:border-danger-800;
}
.pc-form-field-wrapper--error .pc-radio-card .pc-radio-card__fake-input {
  @apply bg-danger-200 dark:bg-danger-800 border-danger-500;
}
.pc-form-field-wrapper--error .pc-label,
.pc-form-field-wrapper--error .pc-checkbox-label {
  @apply !text-danger-600 dark:!text-danger-200;
}
.pc-checkbox-label {
  @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200;
}
.pc-label {
  @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200;
}
.pc-label--for-checkbox {
  @apply !mb-0 font-normal;
}
.pc-label--required:after {
  color: #e32;
  content: " *";
  display: inline;
}
.pc-form-field-error {
  @apply mt-1 text-xs italic text-danger-500;
}
.pc-form-help-text {
  @apply mt-2 text-sm text-gray-500 dark:text-gray-400;
}
.pc-time-select {
  @apply select-wrapper dark:text-white;
}
.pc-datetime-select {
  @apply select-wrapper dark:text-white;
}
.pc-date-select {
  @apply select-wrapper dark:text-white;
}
.pc-switch {
  @apply relative inline-flex items-center justify-center flex-shrink-0 cursor-pointer;
}
.pc-switch--xs {
  @apply w-6 h-3;
}
.pc-switch--sm {
  @apply w-8 h-4;
}
.pc-switch--md {
  @apply w-10 h-5;
}
.pc-switch--lg {
  @apply w-12 h-6;
}
.pc-switch--xl {
  @apply w-14 h-7;
}
.pc-switch__fake-input {
  @apply absolute mx-auto transition-colors duration-200 ease-in-out bg-gray-200 border border-gray-300 rounded-full pointer-events-none dark:bg-gray-700 dark:border-gray-600 peer-checked:bg-primary-500;
}
.pc-switch__fake-input--xs {
  @apply h-4 w-7;
}
.pc-switch__fake-input--sm {
  @apply h-5 w-9;
}
.pc-switch__fake-input--md {
  @apply h-6 w-11;
}
.pc-switch__fake-input--lg {
  @apply h-7 w-[3.25rem];
}
.pc-switch__fake-input--xl {
  @apply h-8 w-[3.75rem];
}
.pc-switch__fake-input-bg {
  @apply absolute left-0 inline-block transition-transform duration-200 ease-in-out transform translate-x-0 bg-white rounded-full shadow pointer-events-none ring-0;
}
.pc-switch__fake-input-bg--xs {
  @apply w-3 h-3;
  @apply peer-checked:translate-x-3;
}
.pc-switch__fake-input-bg--sm {
  @apply w-4 h-4;
  @apply peer-checked:translate-x-4;
}
.pc-switch__fake-input-bg--md {
  @apply w-5 h-5;
  @apply peer-checked:translate-x-5;
}
.pc-switch__fake-input-bg--lg {
  @apply w-6 h-6;
  @apply peer-checked:translate-x-6;
}
.pc-switch__fake-input-bg--xl {
  @apply w-7 h-7;
  @apply peer-checked:translate-x-7;
}
.pc-text-input {
  @apply block w-full border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-300 dark:disabled:bg-gray-700 focus:outline-none;
}

/* Password Field Styles */
.pc-password-field-wrapper {
  @apply relative;
}

.pc-password-field-input {
  @apply pr-10;
}

.pc-password-field-toggle-button {
  @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500;
}

.pc-password-field-toggle-icon-container {
  @apply flex items-center;
}

.pc-password-field-toggle-icon {
  @apply w-5 h-5 text-gray-400;
}

/* Copyable Field Styles */
.pc-copyable-field-wrapper {
  @apply relative;
}

.pc-copyable-field-input {
  @apply pr-10 cursor-text;
}

.pc-copyable-field-button {
  @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 bg-transparent border-none cursor-pointer;
}

.pc-copyable-field-icon-container {
  @apply flex items-center;
}

.pc-copyable-field-icon {
  @apply w-5 h-5 text-gray-400;
}

/* Clearable Field Styles */
.pc-clearable-field-input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.pc-clearable-field-wrapper {
  @apply relative;
}

.pc-clearable-field-input {
  @apply pr-10;
}

.pc-clearable-field-button {
  @apply absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 bg-transparent border-none cursor-pointer;
}

.pc-clearable-field-icon-container {
  @apply flex items-center;
}

.pc-clearable-field-icon {
  @apply w-5 h-5 text-gray-500 dark:text-gray-400;
}

/* Date and Time Field Styles */
.pc-date-input {
  @apply pc-text-input;
  @apply [-webkit-appearance:none] [&::-webkit-datetime-edit-fields-wrapper]:p-0 [&::-webkit-date-and-time-value]:text-black dark:[&::-webkit-date-and-time-value]:text-white pe-[40px];
}

.pc-date-input-wrapper {
  @apply relative;
}

.pc-date-input-icon {
  @apply absolute inset-y-0 right-0 flex items-center my-1 mr-3 bg-white pointer-events-none dark:bg-gray-800;
}

/* Add error state styles */
.pc-form-field-wrapper--error .pc-date-input-icon {
  @apply bg-danger-50 dark:bg-danger-900;
}

/* Add disabled state styles */
.pc-form-field-wrapper:has(input:disabled) .pc-date-input-icon {
  @apply bg-gray-100 dark:bg-gray-700;
}

.pc-date-picker-indicator {
  @apply [&::-webkit-calendar-picker-indicator]:opacity-0;
  @apply [&::-webkit-calendar-picker-indicator]:absolute;
  @apply [&::-webkit-calendar-picker-indicator]:inset-y-0;
  @apply [&::-webkit-calendar-picker-indicator]:right-0;
  @apply [&::-webkit-calendar-picker-indicator]:w-10;
  @apply [&::-webkit-calendar-picker-indicator]:h-full;
  @apply [&::-webkit-calendar-picker-indicator]:cursor-pointer;
}

.pc-select {
  @apply block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-md cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none sm:text-sm dark:disabled:bg-gray-700 dark:text-gray-300 dark:bg-gray-800;
}
.pc-file-input {
  @apply text-sm rounded-md cursor-pointer focus:outline-none file:border-0 text-slate-500 file:text-primary-700 file:font-semibold file:px-4 file:py-2 file:mr-6 file:rounded-md hover:file:bg-primary-100 file:bg-primary-200 dark:file:bg-primary-300 hover:dark:file:bg-primary-200;
}
.pc-color-input {
  @apply border-gray-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500;
}
.pc-range-input {
  @apply w-full border-gray-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500;
}
.pc-checkbox {
  @apply w-5 h-5 transition-all duration-150 ease-linear border-gray-300 rounded cursor-pointer text-primary-700 dark:bg-gray-800 dark:border-gray-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed;
}
.pc-checkbox-group {
  @apply pt-2;
}
.pc-checkbox-group--row {
  @apply flex flex-row gap-4 mb-3;
}
.pc-checkbox-group--col {
  @apply flex flex-col gap-4 mb-3;
}
.pc-checkbox-group__item--row {
  @apply inline-flex items-center gap-2 cursor-pointer;
}
.pc-checkbox-group__item--col {
  @apply inline-flex items-center gap-3 cursor-pointer;
}
.pc-radio {
  @apply w-4 h-4 border-gray-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-600;
}
.pc-radio-group {
  @apply pt-2;
}
.pc-radio-group--row {
  @apply flex flex-row gap-4 mb-3;
}
.pc-radio-group--col {
  @apply flex flex-col gap-4 mb-3;
}
.pc-radio-group__item--row {
  @apply inline-flex items-center gap-2 cursor-pointer;
}
.pc-radio-group__item--col {
  @apply inline-flex items-center gap-3 cursor-pointer;
}
.pc-checkbox-group--empty-message,
.pc-radio-group--empty-message {
  @apply text-sm;
}

/* Radio Card Styles */

.pc-radio-card-group {
  @apply flex gap-4;
}

.pc-radio-card-group--row {
  @apply flex-col sm:flex-row;
}

.pc-radio-card-group--col {
  @apply flex-col;
}

.pc-radio-card {
  @apply relative transition-all cursor-pointer select-none;
  @apply flex items-center justify-center text-left text-gray-900 dark:text-white;
}

/* Radio Card Size Styles */

/* Apply padding to .pc-radio-card__content */
.pc-radio-card--sm > .pc-radio-card__content {
  @apply px-4 py-2;
}

.pc-radio-card--md > .pc-radio-card__content {
  @apply px-8 py-4;
}

.pc-radio-card--lg > .pc-radio-card__content {
  @apply px-12 py-6;
}

/* Adjust text size for labels */
.pc-radio-card--sm .pc-radio-card__label {
  @apply text-sm;
}

.pc-radio-card--md .pc-radio-card__label {
  @apply text-base;
}

.pc-radio-card--lg .pc-radio-card__label {
  @apply text-lg;
}

/* Adjust text size for descriptions */
.pc-radio-card--sm .pc-radio-card__description {
  @apply text-xs;
}

.pc-radio-card--md .pc-radio-card__description {
  @apply text-sm;
}

.pc-radio-card--lg .pc-radio-card__description {
  @apply text-base;
}

.pc-radio-card--outline .pc-radio-card__fake-input {
  @apply bg-white border border-gray-300;
  @apply dark:bg-gray-800 dark:border-gray-600;
}

.pc-radio-card--outline:hover .pc-radio-card__fake-input {
  @apply bg-gray-50 dark:bg-gray-800;
}

.pc-radio-card--classic .pc-radio-card__fake-input {
  @apply bg-gray-100 border border-gray-100 dark:border-gray-800 dark:bg-gray-800;
}

.pc-radio-card--classic:hover .pc-radio-card__fake-input {
  @apply bg-gray-50 dark:bg-gray-800;
}

/* Checked State Styles */
.pc-radio-card__input:checked ~ .pc-radio-card__fake-input {
  @apply border-2 border-primary-500 bg-primary-50;
  @apply dark:bg-gray-800;
}

/* Disabled State */
.pc-radio-card--disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Input Styles */
.pc-radio-card__input {
  @apply sr-only;
}

/* Fake Input Styles */
.pc-radio-card__fake-input {
  @apply absolute inset-0 rounded-lg;
}

/* Content Styles */
.pc-radio-card__content {
  @apply relative pointer-events-none;
}

/* Label Styles */
.pc-radio-card__label {
  @apply font-semibold;
}

/* Description Styles */
.pc-radio-card__description {
  @apply text-sm font-normal text-gray-600;
  @apply dark:text-gray-400;
}

/* Adjust Description Font Size Based on Size */
.pc-radio-card--sm .pc-radio-card__description {
  @apply text-xs;
}

.pc-radio-card--lg .pc-radio-card__description {
  @apply text-base;
}

/* Apply styles when input is checked using peer-checked variants */
.pc-radio-card.peer-checked\\:border-primary-500 {
  @apply border-primary-500;
}

.pc-radio-card.peer-checked\\:bg-primary-50 {
  @apply bg-primary-50;
}

.pc-radio-card.dark\\:peer-checked\\:bg-primary-700 {
  @apply dark:bg-primary-700;
}

/* Dropdown */

.pc-dropdown {
  @apply relative inline-block text-left;
}
.pc-dropdown__chevron {
  @apply w-5 h-5 ml-2 -mr-1 dark:text-gray-100;
}
.pc-dropdown__menu-items-wrapper {
  @apply absolute z-30 w-56 mt-2 bg-white rounded-md shadow-lg dark:bg-gray-800 ring-1 ring-black ring-opacity-5 focus:outline-none;
}
.pc-dropdown__menu-items-wrapper-placement--left {
  @apply right-0 origin-top-right;
}
.pc-dropdown__menu-items-wrapper-placement--right {
  @apply left-0 origin-top-left;
}
.pc-dropdown__menu-item {
  @apply flex items-center self-start justify-start w-full gap-2 px-4 py-2 text-sm text-left text-gray-700 transition duration-150 ease-in-out dark:hover:bg-gray-700 dark:text-gray-300 dark:bg-gray-800 hover:bg-gray-100;
}
.pc-dropdown__trigger-button--no-label {
  @apply flex items-center text-gray-400 rounded-full hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-primary-500;
}
.pc-dropdown__trigger-button--with-label {
  @apply inline-flex justify-center w-full px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm dark:text-gray-300 dark:bg-gray-800 hover:dark:bg-gray-700 dark:border-gray-700 dark:focus:bg-gray-800 hover:bg-gray-50 focus:outline-none;
}
.pc-dropdown__trigger-button--with-label-and-trigger-element {
  @apply align-middle;
}
.pc-dropdown__menu-item--disabled {
  @apply text-gray-500 hover:bg-transparent;
}
.pc-dropdown__ellipsis {
  @apply w-5 h-5;
}

/* Loading */

.pc-spinner--sm {
  @apply w-5 h-5 shrink-0;
}
.pc-spinner--md {
  @apply w-8 h-8 shrink-0;
}
.pc-spinner--lg {
  @apply w-16 h-16 shrink-0;
}

/* Breadcrumbs */

.pc-breadcrumbs {
  @apply flex items-center;
}
.pc-breadcrumb {
  @apply flex text-gray-500 hover:underline dark:text-gray-400;
}
.pc-breadcrumbs__separator-slash {
  @apply px-5 text-lg text-gray-300;
}
.pc-breadcrumbs__separator-chevron {
  @apply px-3 text-gray-300;
}
.pc-breadcrumbs__separator-chevron__icon {
  @apply w-6 h-6;
}
.pc-breadcrumb-icon {
  @apply w-6 h-6 shrink-0;
}

/* Avatars */

.pc-avatar--with-image {
  @apply object-cover rounded-full;
}
.pc-avatar--with-placeholder-icon {
  @apply relative inline-block overflow-hidden bg-gray-100 rounded-full dark:bg-gray-700;
}
.pc-avatar--with-placeholder-initials {
  @apply flex items-center justify-center font-semibold text-gray-500 uppercase bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300;
}
.pc-avatar-group {
  @apply ring-white ring-2 dark:ring-gray-100;
}
.pc-avatar__placeholder-icon {
  @apply relative w-full h-full bg-gray-300 top-[12%] scale-[1.15] transform !important;
}

/* Avatars - sizes */

.pc-avatar--xs {
  @apply text-xs w-7 h-7;
}
.pc-avatar--sm {
  @apply w-8 h-8 text-sm;
}
.pc-avatar--md {
  @apply w-10 h-10 text-base;
}
.pc-avatar--lg {
  @apply w-12 h-12 text-lg;
}
.pc-avatar--xl {
  @apply text-xl w-14 h-14;
}
.pc-avatar-group--xs {
  @apply relative z-0 flex -space-x-2;
}
.pc-avatar-group--sm {
  @apply relative z-0 flex -space-x-3;
}
.pc-avatar-group--md {
  @apply relative z-0 flex -space-x-4;
}
.pc-avatar-group--lg {
  @apply relative z-0 flex -space-x-5;
}
.pc-avatar-group--xl {
  @apply relative z-0 flex -space-x-6;
}

/* Progress */

.pc-progress {
  @apply flex overflow-hidden;
}
.pc-progress__inner {
  @apply flex flex-col justify-center;
}

/* Progress - label (xl only) */

.pc-progress__label {
  @apply px-4 text-xs font-normal leading-6 text-center text-white whitespace-nowrap;
}

/* Progress - sizes */

.pc-progress--xs {
  @apply h-1 rounded-sm;
}
.pc-progress--sm {
  @apply h-2 rounded-md;
}
.pc-progress--md {
  @apply h-3 rounded-md;
}
.pc-progress--lg {
  @apply h-4 rounded-lg;
}
.pc-progress--xl {
  @apply h-5 rounded-xl;
}

/* Progress - colors */

.pc-progress--primary {
  @apply bg-primary-100 dark:bg-primary-900;
}
.pc-progress--secondary {
  @apply bg-secondary-100 dark:bg-secondary-900;
}
.pc-progress--info {
  @apply bg-info-100 dark:bg-info-900;
}
.pc-progress--success {
  @apply bg-success-100 dark:bg-success-900;
}
.pc-progress--warning {
  @apply bg-warning-100 dark:bg-warning-900;
}
.pc-progress--danger {
  @apply bg-danger-100 dark:bg-danger-900;
}
.pc-progress--gray {
  @apply bg-gray-100 dark:bg-gray-900;
}
.pc-progress__inner--primary {
  @apply bg-primary-500;
}
.pc-progress__inner--secondary {
  @apply bg-secondary-500;
}
.pc-progress__inner--info {
  @apply bg-info-500;
}
.pc-progress__inner--success {
  @apply bg-success-500;
}
.pc-progress__inner--warning {
  @apply bg-warning-500;
}
.pc-progress__inner--danger {
  @apply bg-danger-500;
}
.pc-progress__inner--gray {
  @apply bg-gray-500;
}

/* Pagination */

.pc-pagination {
  @apply flex;
}
.pc-pagination__inner {
  @apply inline-flex -space-x-px text-sm font-medium;
}
.pc-pagination__item {
  @apply inline-flex items-center justify-center leading-5 px-3.5 py-2 border border-gray-200 dark:border-gray-700;
}
.pc-pagination__item--is-current {
  @apply text-gray-800 bg-gray-100 dark:bg-gray-800 dark:text-gray-300;
}
.pc-pagination__item--is-not-current {
  @apply text-gray-600 bg-white hover:bg-gray-50 hover:text-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-gray-400;
}
.pc-pagination__item--current {
  @apply inline-flex items-center justify-center leading-5 px-3.5 py-2 border border-gray-200 dark:border-gray-700;
}
.pc-pagination__item__previous {
  @apply mr-2 inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white enabled:hover:bg-gray-50 dark:bg-gray-900 enabled:dark:hover:bg-gray-800 border dark:border-gray-700 border-gray-200 text-gray-600 enabled:hover:text-gray-800 disabled:opacity-50;
}
.pc-pagination__item__previous__chevron {
  /* !important is needed because heroicon class overrides width and height */
  @apply w-5 h-5 text-gray-600 dark:text-gray-400 !important;
}
.pc-pagination__item__next {
  @apply ml-2 inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white enabled:hover:bg-gray-50 dark:bg-gray-900 enabled:dark:hover:bg-gray-800 dark:border-gray-700 border border-gray-200 text-gray-600 enabled:hover:text-gray-800 disabled:opacity-50;
}
.pc-pagination__item__next__chevron {
  /* !important is needed because heroicon class overrides width and height */
  @apply w-5 h-5 text-gray-600 dark:text-gray-400 !important;
}
.pc-pagination__item__ellipsis {
  @apply inline-flex items-center justify-center leading-5 px-3.5 py-2 bg-white border dark:bg-gray-900 dark:border-gray-700 border-gray-200 text-gray-400;
}

/* Pagination - number(s) rounded box corner style */

.pc-pagination__item--with-single-box {
  @apply rounded;
}
.pc-pagination__item--with-multiple-boxes--left {
  @apply rounded-l;
}
.pc-pagination__item--with-multiple-boxes--right {
  @apply rounded-r;
}
.pc-pagination__item--with-multiple-boxes--right {
  @apply rounded-r;
}

/* Tabs */

.pc-tabs {
  @apply flex gap-x-8 gap-y-2;
}
.pc-tabs--underlined {
  @apply border-b border-gray-200 dark:border-gray-600;
}

/* Tabs - Pill */

.pc-tab__pill {
  @apply flex items-center px-3 py-2 text-sm font-medium rounded-md whitespace-nowrap;
}
.pc-tab__pill--is-active {
  @apply bg-primary-100 dark:bg-gray-800 text-primary-600 dark:text-primary-500;
}
.pc-tab__pill--is-not-active {
  @apply text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 dark:text-gray-400 dark:hover:bg-gray-800 hover:bg-gray-100;
}

/* Tabs - Individual Tab Underline */

.pc-tab__underline {
  @apply flex items-center px-3 py-3 text-sm font-medium border-b-2 whitespace-nowrap;
}
.pc-tab__underline--is-active {
  @apply border-primary-500 text-primary-600 dark:text-primary-500 dark:border-primary-500;
}
.pc-tab__underline--is-not-active {
  @apply text-gray-500 border-transparent dark:hover:text-gray-300 dark:text-gray-400 hover:border-gray-300 hover:text-gray-600;
}
.pc-tab__underline--with-underline-and-is-active {
}
.pc-tab__underline--with-underline-and-is-not-active {
  @apply hover:border-gray-300;
}

/* Tabs - Number */

.pc-tab__number {
  @apply whitespace-nowrap ml-2 py-0.5 px-2 rounded-full text-xs font-normal;
}

/* Tabs - Pill with number */

.pc-tab__number__pill--is-active {
  @apply text-white bg-primary-600;
}
.pc-tab__number__pill--is-not-active {
  @apply text-white bg-gray-500 dark:bg-gray-600;
}

/* Tabs - Underlined with number */

.pc-tab__number__underline--is-active {
  @apply bg-primary-100 text-primary-600;
}
.pc-tab__number__underline--is-not-active {
  @apply text-gray-500 bg-gray-100;
}
.pc-tab__number__underline--with-underline-and-is-active {
  @apply bg-primary-100 dark:bg-primary-600 text-primary-600 dark:text-white;
}
.pc-tab__number__underline--with-underline-and-is-not-active {
  @apply text-gray-500 bg-gray-100 dark:bg-gray-600 dark:text-white;
}

/* Cards */

.pc-card {
  @apply flex flex-wrap overflow-hidden bg-white dark:bg-gray-800;
}
.pc-card__inner {
  @apply flex flex-col w-full max-w-full;
}
.pc-card--basic {
  @apply border border-gray-200 rounded-lg shadow-lg dark:shadow-2xl dark:border-none;
}
.pc-card--outline {
  @apply border border-gray-300 rounded-lg dark:border-gray-600;
}

/* Cards - content */

.pc-card__content {
  @apply flex-1 p-6 text-base font-light text-gray-500 dark:text-gray-400;
}
.pc-card__category {
  @apply mb-3 text-sm font-medium;
}
.pc-card__category--primary {
  @apply text-primary-600 dark:text-primary-400;
}
.pc-card__heading {
  @apply mb-2 text-xl font-medium text-gray-900 dark:text-gray-300;
}

/* Cards - with media */

.pc-card__image {
  @apply flex-shrink-0 object-cover w-full;
}
.pc-card__image-placeholder {
  @apply flex-shrink-0 w-full bg-gray-300 dark:bg-gray-700;
}

/* Cards - footer */

.pc-card__footer {
  @apply px-6 pb-6;
}

/* Table */

.pc-table--basic {
  @apply min-w-full overflow-hidden rounded-sm shadow table-auto ring-1 ring-gray-200 dark:ring-gray-800 sm:rounded;
}
.pc-table--ghost {
  @apply min-w-full overflow-hidden table-auto;
}
.pc-table__th {
  @apply px-6 py-3 text-sm font-semibold tracking-wider text-left text-gray-900 bg-gray-50 dark:bg-gray-800 dark:text-gray-300;
}
.pc-table thead {
  @apply border-b dark:border-gray-800 dark:bg-gray-900;
}
.pc-table__tr {
  @apply bg-white border-b dark:border-gray-800 dark:bg-gray-900 last:border-none;
}
.pc-table__tr--row-click {
  @apply hover:bg-gray-50 dark:hover:bg-gray-800;
}
.pc-table__td {
  @apply px-6 py-4 text-sm text-gray-500 dark:text-gray-400;
}
.pc-table__td--first-col {
  @apply font-semibold;
}
.pc-table__td--row-click {
  @apply hover:cursor-pointer;
}
.pc-table__user-inner-td {
  @apply flex items-center gap-3;
}
.pc-table__user-inner-td__inner {
  @apply flex flex-col overflow-hidden;
}
.pc-table__user-inner-td__label {
  @apply overflow-hidden font-medium text-gray-900 whitespace-nowrap text-ellipsis dark:text-gray-300;
}
.pc-table__user-inner-td__sub-label {
  @apply overflow-hidden font-normal text-gray-500 whitespace-nowrap text-ellipsis;
}

/* Accordion */

.pc-accordion-item {
  @apply flex items-center justify-between w-full p-5 text-left text-gray-800 bg-white border border-gray-200 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-800;
}
.pc-accordion-item--first {
  @apply rounded-t-xl;
}
.pc-accordion-item--all-except-last {
  @apply border-b-0;
}
.pc-accordion-item__heading {
  @apply text-base font-semibold;
}
.pc-accordion-item__chevron {
  @apply flex-shrink-0 w-6 h-6 ml-3 text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
}
.pc-accordion-item__content-container {
  @apply p-5 bg-white border border-gray-200 dark:border-gray-700 dark:bg-gray-900;
}
.pc-accordion-item__content-container--not-last {
  @apply border-b-0;
}
.pc-accordion-item__content-container--last {
  @apply border-t-0;
}
.pc-accordion-item__content-container--highlight-accordion-button-on-expanded-js-attributes {
  @apply bg-gray-50 dark:bg-gray-800;
}

/* Ghost variant */
.pc-accordion--ghost {
  @apply w-full mx-auto divide-y divide-gray-900/10 dark:divide-gray-100/10;
}

.pc-accordion-item--ghost {
  @apply py-6;
}

.pc-accordion-item__button--ghost {
  @apply flex items-start justify-between w-full text-left text-gray-900 dark:text-gray-100;
}

.pc-accordion-item__minus {
  @apply !w-6 !h-6 text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
}
.pc-accordion-item__plus {
  @apply !w-6 !h-6 text-gray-400 duration-300 fill-current dark:group-hover:text-gray-300 group-hover:text-gray-500;
}

.pc-accordion--ghost [x-cloak].pc-accordion-item__plus,
.pc-accordion--ghost [x-cloak].pc-accordion-item__minus {
  display: none !important;
}

.pc-accordion-item__heading--ghost {
  @apply text-base font-semibold leading-7;
}

.pc-accordion-item__icon-container--ghost {
  @apply relative flex items-center ml-6 h-7;
}

.pc-accordion-item__content--ghost {
  @apply pr-12 my-2;
}

/* Hide icons by default for LiveView */
.pc-accordion-item__plus[data-js-loading],
.pc-accordion-item__minus[data-js-loading] {
  display: none;
}

/* Marquee Container */
.pc-marquee-container {
  @apply relative flex p-2 overflow-hidden;
  gap: var(--gap);
}

.pc-marquee-container.pc-vertical {
  @apply flex-col;
}

/* Max width variants */
.pc-marquee-container[max-width="sm"] {
  @apply max-w-sm;
}

.pc-marquee-container[max-width="md"] {
  @apply max-w-md;
}

.pc-marquee-container[max-width="lg"] {
  @apply max-w-lg;
}

.pc-marquee-container[max-width="xl"] {
  @apply max-w-xl;
}

.pc-marquee-container[max-width="2xl"] {
  @apply max-w-2xl;
}

/* Max height variants */
.pc-marquee-container[max-height="sm"] {
  @apply max-h-[24rem];
}

.pc-marquee-container[max-height="md"] {
  @apply max-h-[28rem];
}

.pc-marquee-container[max-height="lg"] {
  @apply max-h-[32rem];
}

.pc-marquee-container[max-height="xl"] {
  @apply max-h-[36rem];
}

.pc-marquee-container[max-height="2xl"] {
  @apply max-h-[42rem];
}

/* Marquee Content */
.pc-marquee-content {
  @apply flex justify-around shrink-0;
  gap: var(--gap);
}

.pc-marquee-horizontal {
  @apply flex-row;
  animation: marquee var(--duration) linear infinite;
}

.pc-marquee-vertical {
  @apply flex-col;
  animation: marquee-vertical var(--duration) linear infinite;
}

.pc-pause-on-hover {
  @apply group-hover:[animation-play-state:paused];
}

.pc-review-card {
  @apply relative md:w-64 cursor-pointer overflow-hidden rounded-xl border p-4
    border-black/10 bg-black/[0.01] hover:bg-black/[0.05]
    dark:border-white/10 dark:bg-white/10 dark:hover:bg-white/[0.15];
}

.pc-review-header {
  @apply flex items-center gap-2;
}

.pc-review-meta {
  @apply flex flex-col;
}

.pc-review-username {
  @apply text-xs text-black/40 dark:text-white/40;
}

.pc-review-body {
  @apply mt-2;
}

/* Animations */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

@keyframes marquee-vertical {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(-100% - var(--gap)));
  }
}

.pc-gradient-overlay-left {
  @apply absolute top-0 bottom-0 left-0 w-1/3 pointer-events-none bg-gradient-to-r from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0;
}

.pc-gradient-overlay-right {
  @apply absolute top-0 bottom-0 right-0 w-1/3 pointer-events-none bg-gradient-to-r from-white/0 to-white dark:from-gray-900/0 dark:to-gray-900;
}

.pc-gradient-overlay-top {
  @apply absolute top-0 left-0 right-0 pointer-events-none h-1/3 bg-gradient-to-b from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0;
}

.pc-gradient-overlay-bottom {
  @apply absolute bottom-0 left-0 right-0 pointer-events-none h-1/3 bg-gradient-to-t from-white to-white/0 dark:from-gray-900 dark:to-gray-900/0;
}

/* Modal */
.pc-modal {
  @apply relative z-50;
}
.pc-modal__overlay {
  @apply fixed inset-0 z-50 transition-opacity bg-gray-50/90 dark:bg-gray-900/90;
}
.pc-modal__wrapper {
  @apply fixed inset-0 z-50 flex items-center justify-center px-4 my-4 overflow-hidden transform sm:px-6;
}
.pc-modal__box {
  @apply w-full max-h-full overflow-auto bg-white shadow-lg rounded-xl dark:bg-gray-800;
}
.pc-modal__box--sm {
  @apply max-w-sm;
}
.pc-modal__box--md {
  @apply max-w-xl;
}
.pc-modal__box--lg {
  @apply max-w-3xl;
}
.pc-modal__box--xl {
  @apply max-w-5xl;
}
.pc-modal__box--2xl {
  @apply max-w-7xl;
}
.pc-modal__box--full {
  @apply max-w-full;
}
.pc-modal__header {
  @apply px-5 py-3 border-b border-gray-100 dark:border-gray-700;
}
.pc-modal__header__container {
  @apply flex items-center justify-between;
}
.pc-modal__header__text {
  @apply font-semibold text-gray-800 dark:text-gray-200;
}
.pc-modal__header__button {
  @apply text-gray-400 hover:text-gray-500;
}
.pc-modal__header__close-svg {
  @apply w-5 h-5 fill-current;
}
.pc-modal__content {
  @apply p-5;
}

/* Skeleton */

.pc-skeleton {
  @apply animate-pulse;
}

/* Default Skeleton */
.pc-skeleton--default {
  @apply max-w-sm pc-skeleton;
}

.pc-skeleton--default__line {
  @apply bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--default__line--h-2 {
  @apply h-2;
}

.pc-skeleton--default__line--h-2\.5 {
  @apply h-2.5;
}

.pc-skeleton--default__line--w-48 {
  @apply w-48;
}

.pc-skeleton--default__line--mb-4 {
  @apply mb-4;
}

.pc-skeleton--default__line--mb-2\.5 {
  @apply mb-2.5;
}

.pc-skeleton--default__line--max-w-360px {
  @apply max-w-[360px];
}

.pc-skeleton--default__line--max-w-330px {
  @apply max-w-[330px];
}

.pc-skeleton--default__line--max-w-300px {
  @apply max-w-[300px];
}

/* Image Skeleton */
.pc-skeleton--image {
  @apply space-y-8 pc-skeleton md:space-y-0 md:space-x-8 rtl:space-x-reverse md:flex md:items-center;
}

.pc-skeleton--image__image-placeholder {
  @apply flex items-center justify-center w-full h-48 bg-gray-300 rounded sm:w-96 dark:bg-gray-700;
}

.pc-skeleton--image__icon {
  @apply w-10 h-10 text-gray-200 dark:text-gray-600;
}

.pc-skeleton--image__content {
  @apply w-full;
}

/* Repeat similar classes for lines inside the image skeleton */
.pc-skeleton--image__line {
  @apply bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--image__line--h-2 {
  @apply h-2;
}

.pc-skeleton--image__line--h-2\.5 {
  @apply h-2.5;
}

.pc-skeleton--image__line--w-48 {
  @apply w-48;
}

.pc-skeleton--image__line--mb-4 {
  @apply mb-4;
}

.pc-skeleton--image__line--mb-2\.5 {
  @apply mb-2.5;
}

.pc-skeleton--image__line--max-w-480px {
  @apply max-w-[480px];
}

.pc-skeleton--image__line--max-w-440px {
  @apply max-w-[440px];
}

.pc-skeleton--image__line--max-w-460px {
  @apply max-w-[460px];
}

.pc-skeleton--image__line--max-w-360px {
  @apply max-w-[360px];
}

/* Video Skeleton */
.pc-skeleton--video {
  @apply flex items-center justify-center h-56 max-w-sm bg-gray-300 rounded-lg pc-skeleton dark:bg-gray-700;
}

.pc-skeleton--video__icon {
  @apply w-10 h-10 text-gray-200 dark:text-gray-600;
}

/* Text Skeleton */
.pc-skeleton--text {
  @apply pc-skeleton space-y-2.5 max-w-lg;
}

.pc-skeleton--text__line-group {
  @apply flex items-center w-full;
}

.pc-skeleton--text__line-group--max-w-480px {
  @apply max-w-[480px];
}

.pc-skeleton--text__line-group--max-w-400px {
  @apply max-w-[400px];
}

.pc-skeleton--text__line-group--max-w-440px {
  @apply max-w-[440px];
}

.pc-skeleton--text__line-group--max-w-360px {
  @apply max-w-[360px];
}

.pc-skeleton--text__block {
  @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--text__block--bg-gray-300 {
  @apply bg-gray-300 dark:bg-gray-600;
}

.pc-skeleton--text__block--w-32 {
  @apply w-32;
}

.pc-skeleton--text__block--w-24 {
  @apply w-24;
}

.pc-skeleton--text__block--w-full {
  @apply w-full;
}

.pc-skeleton--text__block--w-80 {
  @apply w-80;
}

.pc-skeleton--text__block--ms-2 {
  @apply ms-2;
}

/* Card Skeleton */
.pc-skeleton--card {
  @apply max-w-sm p-4 border border-gray-200 rounded shadow pc-skeleton md:p-6 dark:border-gray-700;
}

.pc-skeleton--card__image-placeholder {
  @apply flex items-center justify-center h-48 mb-4 bg-gray-300 rounded dark:bg-gray-700;
}

.pc-skeleton--card__icon {
  @apply w-10 h-10 text-gray-200 dark:text-gray-600;
}

.pc-skeleton--card__line {
  @apply bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--card__line--h-2\.5 {
  @apply h-2.5 w-48;
}

.pc-skeleton--card__line--h-2 {
  @apply h-2;
}

.pc-skeleton--card__line--mb-4 {
  @apply mb-4;
}

.pc-skeleton--card__line--mb-2\.5 {
  @apply mb-2.5;
}

.pc-skeleton--card__avatar {
  @apply flex items-center mt-4;
}

.pc-skeleton--card__avatar-icon {
  @apply w-10 h-10 text-gray-200 me-3 dark:text-gray-700;
}

.pc-skeleton--card__avatar-text {
  @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--card__avatar-text--w-32 {
  @apply w-32 mb-2;
}

.pc-skeleton--card__avatar-text--w-48 {
  @apply w-48 h-2;
}

/* Widget Skeleton */

.pc-skeleton--widget {
  @apply max-w-sm p-4 border border-gray-200 rounded shadow pc-skeleton md:p-6 dark:border-gray-700;
}

.pc-skeleton--widget__header-line {
  @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--widget__header-line--w-32 {
  @apply w-32 mb-2.5;
}

.pc-skeleton--widget__header-line--w-48 {
  @apply w-48 h-2 mb-10;
}

.pc-skeleton--widget__chart {
  @apply flex items-baseline mt-4;
}

.pc-skeleton--widget__chart-bar {
  @apply w-full bg-gray-200 rounded-t-lg dark:bg-gray-700;
}

.pc-skeleton--widget__chart-bar--h-72 {
  @apply h-72;
}

.pc-skeleton--widget__chart-bar--h-56 {
  @apply h-56;
}

.pc-skeleton--widget__chart-bar--h-64 {
  @apply h-64;
}

.pc-skeleton--widget__chart-bar--h-80 {
  @apply h-80;
}

.pc-skeleton--widget__chart-bar--ms-6 {
  @apply ms-6;
}

/* List Skeleton */

.pc-skeleton--list {
  @apply max-w-md p-4 space-y-4 border border-gray-200 divide-y divide-gray-200 rounded shadow pc-skeleton md:p-6 dark:divide-gray-700 dark:border-gray-700;
}

.pc-skeleton--list__item {
  @apply flex items-center justify-between;
}

.pc-skeleton--list__item--pt-4 {
  @apply pt-4;
}

.pc-skeleton--list__text-group {
  @apply flex flex-col;
}

.pc-skeleton--list__text-line {
  @apply w-24 mb-2.5 bg-gray-300 rounded-full dark:bg-gray-600;
}

.pc-skeleton--list__sub-text-line {
  @apply w-32 h-2 bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--list__text-line--h-2\.5 {
  @apply h-2.5;
}

.pc-skeleton--list__button {
  @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--list__button--w-12 {
  @apply w-12;
}

/* Testimonial Skeleton */

.pc-skeleton--testimonial {
  @apply pc-skeleton;
}

.pc-skeleton--testimonial__line {
  @apply h-2.5 bg-gray-300 rounded-full dark:bg-gray-700 mx-auto;
}

.pc-skeleton--testimonial__line--h-2\.5 {
  @apply h-2.5;
}

.pc-skeleton--testimonial__line--max-w-640px {
  @apply max-w-[640px] mb-2.5;
}

.pc-skeleton--testimonial__line--max-w-540px {
  @apply max-w-[540px];
}

.pc-skeleton--testimonial__footer {
  @apply flex items-center justify-center mt-4;
}

.pc-skeleton--testimonial__avatar-icon {
  @apply w-8 h-8 text-gray-200 me-4 dark:text-gray-700;
}

.pc-skeleton--testimonial__avatar-text {
  @apply h-2.5 bg-gray-200 rounded-full dark:bg-gray-700;
}

.pc-skeleton--testimonial__avatar-text--w-20 {
  @apply w-20 me-3;
}

.pc-skeleton--testimonial__avatar-text--w-24 {
  @apply w-24 h-2;
}

/* Slideover */

.pc-slideover__overlay {
  @apply fixed inset-0 z-50 transition-opacity bg-gray-900 dark:bg-gray-900 bg-opacity-30 dark:bg-opacity-70;
}
.pc-slideover__wrapper {
  @apply fixed inset-0 z-50 flex overflow-hidden;
}
.pc-slideover__box {
  @apply w-full max-h-full overflow-auto bg-white shadow-lg dark:bg-gray-800;
}
.pc-slideover__box--sm {
  @apply max-w-sm;
}
.pc-slideover__box--md {
  @apply max-w-xl;
}
.pc-slideover__box--lg {
  @apply max-w-3xl;
}
.pc-slideover__box--xl {
  @apply max-w-5xl;
}
.pc-slideover__box--2xl {
  @apply max-w-7xl;
}
.pc-slideover__box--full {
  @apply max-w-full;
}
.pc-slideover__header {
  @apply px-5 py-3 border-b border-gray-100 dark:border-gray-600;
}
.pc-slideover__header__container {
  @apply flex items-center justify-between;
}
.pc-slideover__header__text {
  @apply font-semibold text-gray-800 dark:text-gray-200;
}
.pc-slideover__header__button {
  @apply text-gray-400 hover:text-gray-500;
}
.pc-slideover__header__close-svg {
  @apply w-4 h-4 fill-current;
}
.pc-slideover__content {
  @apply p-5;
}

/* Stepper */
.pc-stepper {
  @apply w-full;
}

.pc-stepper__container {
  @apply flex md:gap-4;
}

.pc-stepper--horizontal .pc-stepper__container {
  @apply flex-col items-start md:flex-row md:items-center;
}

.pc-stepper--vertical .pc-stepper__container {
  @apply flex-col items-start;
}

/* Item */
.pc-stepper__item {
  @apply flex-shrink-0;
}

.pc-stepper__item-content {
  @apply flex items-center gap-4 focus:outline-none ring-0;
}

/* Node */
.pc-stepper__node {
  @apply flex items-center gap-4 transition-all duration-200 cursor-pointer hover:opacity-90;
}

/* Indicator */
.pc-stepper__indicator {
  @apply grid flex-shrink-0 text-white transition-all duration-200 bg-gray-500 rounded-full place-items-center;
}

.pc-stepper__node--complete .pc-stepper__indicator {
  @apply bg-success-500;
}

.pc-stepper__node--active .pc-stepper__indicator {
  @apply border-2 border-success-800 dark:border-success-100;
}

/* Size variants for indicator */
.pc-stepper--sm .pc-stepper__indicator {
  @apply w-8 h-8;
}

.pc-stepper--md .pc-stepper__indicator {
  @apply w-10 h-10;
}

.pc-stepper--lg .pc-stepper__indicator {
  @apply w-12 h-12;
}

/* Check icon */
.pc-stepper__check {
  @apply text-white;
}

.pc-stepper--sm .pc-stepper__check {
  @apply w-4 h-4;
}

.pc-stepper--md .pc-stepper__check {
  @apply w-5 h-5;
}

.pc-stepper--lg .pc-stepper__check {
  @apply w-6 h-6;
}

/* Number */
.pc-stepper__number {
  @apply font-semibold;
}

.pc-stepper--sm .pc-stepper__number {
  @apply text-sm;
}

.pc-stepper--md .pc-stepper__number {
  @apply text-base;
}

.pc-stepper--lg .pc-stepper__number {
  @apply text-lg;
}

/* Content */
.pc-stepper__content {
  @apply flex flex-col w-full gap-1 text-left grow;
}

/* Title */
.pc-stepper__title {
  @apply text-sm font-semibold text-gray-900 dark:text-gray-100;
}

/* Description */
.pc-stepper__description {
  @apply text-sm text-gray-500 dark:text-gray-400;
}

/* Connector Wrapper */
.pc-stepper__connector-wrapper {
  @apply flex self-start shrink md:self-center;
}

/* Size Variants */
.pc-stepper--sm .pc-stepper__connector-wrapper {
  @apply pl-4 md:pl-0;
}

.pc-stepper--md .pc-stepper__connector-wrapper {
  @apply pl-5 md:pl-0;
}

.pc-stepper--lg .pc-stepper__connector-wrapper {
  @apply pl-6 md:pl-0;
}

.pc-stepper--horizontal .pc-stepper__connector-wrapper {
  @apply flex h-full md:w-full md:h-auto;
}

/* Vertical Orientation Connector Wrapper Adjustments */

/* Small Size */
.pc-stepper--vertical.pc-stepper--sm .pc-stepper__connector-wrapper {
  @apply self-start;
  @apply md:pl-4;
}

/* Medium Size */
.pc-stepper--vertical.pc-stepper--md .pc-stepper__connector-wrapper {
  @apply self-start;
  @apply md:pl-5;
}

/* Large Size */
.pc-stepper--vertical.pc-stepper--lg .pc-stepper__connector-wrapper {
  @apply self-start;
  @apply md:pl-6;
}
.pc-stepper--vertical .pc-stepper__container {
  @apply md:gap-1;
}

/* Connector */
.pc-stepper__connector {
  @apply bg-gray-200 shrink dark:bg-gray-600;
}

.pc-stepper__connector--complete {
  @apply bg-success-500 dark:bg-success-500;
}

.pc-stepper--horizontal .pc-stepper__connector {
  @apply h-8 w-0.5 my-2 mx-auto md:h-0.5 md:w-full md:my-auto md:mx-0;
}

.pc-stepper--vertical .pc-stepper__connector {
  @apply w-0.5 h-8 mx-auto;
}

/* Rating */

.pc-rating__wrapper {
  @apply flex items-center gap-1;
}
.pc-rating__label {
  @apply ml-1 text-base font-bold text-gray-700 dark:text-gray-300;
}
.pc-rating__star--filled {
  @apply w-5 h-5 fill-warning-500;
}
.pc-rating__star--half {
  @apply w-5 h-5 fill-warning-500;
}
.pc-rating__star--empty {
  @apply w-5 h-5 fill-gray-400 dark:fill-gray-500;
}

/* Menu */

.pc-vertical-menu {
  @apply flex flex-col gap-5;
}

.pc-vertical-menu-item__icon {
  @apply flex-shrink-0 w-5 h-5;
}

.pc-vertical-menu-item {
  @apply flex items-center w-full gap-3 px-3 py-2 text-sm font-semibold leading-none transition duration-200 rounded-md;
}

.pc-vertical-menu-item--active {
  @apply text-primary-700 dark:text-primary-400 bg-gray-50 dark:bg-gray-800;
}

.pc-vertical-menu-item--inactive {
  @apply text-gray-700 hover:bg-gray-50 dark:text-gray-200 hover:text-gray-900 dark:hover:text-white dark:hover:bg-gray-700;
}

.pc-vertical-menu__menu-group__wrapper {
  @apply divide-y divide-gray-300;
}

.pc-vertical-menu__menu-group {
  @apply space-y-1;
}

.pc-vertical-menu__menu-group__title {
  @apply pl-3 mb-3 text-xs font-semibold leading-6 text-gray-400 uppercase;
}

.pc-vertical-menu-item__label {
  @apply flex-1;
}

.pc-vertical-menu-item__toggle-label {
  @apply flex-1 text-left;
}

.pc-vertical-menu-item__toggle-chevron__icon {
  /* !important is needed because heroicon class overrides width and height */
  @apply w-3 h-3 ml-2 transition duration-200 transform !important;
}

.pc-vertical-menu-item__toggle-chevron__wrapper {
  @apply relative inline-block;
}

.pc-vertical-menu-item__submenu-wrapper {
  @apply mt-1 ml-3 space-y-1;
}

.pc-vertical-menu-item__icon--active {
  @apply flex-shrink-0 w-5 h-5;
}

.pc-vertical-menu-item__icon--inactive {
  @apply flex-shrink-0 w-5 h-5;
}

/* Other */

/* This is for selects inside of a group of selects. Phoenix doesn't provide a way to add a class to these. */
.select-wrapper select {
  @apply text-sm border-gray-300 rounded-md shadow-sm cursor-pointer disabled:bg-gray-100 disabled:cursor-not-allowed focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 dark:bg-gray-800 dark:text-gray-300 focus:outline-none;
}

label.has-error {
  @apply !text-danger-900 dark:!text-danger-200;
}

span.has-error {
  @apply !text-danger-900 dark:!text-danger-200;
}

textarea.has-error,
input.has-error:not(:checked),
select.has-error {
  @apply !border-danger-500 focus:!border-danger-500 !text-danger-900 !placeholder-danger-700 !bg-danger-50 dark:!text-danger-100 dark:!placeholder-danger-300 dark:!bg-danger-900 focus:!ring-danger-500;
}

input[type="file_input"].has-error {
  @apply !border-danger-500 !rounded-md focus:!border-danger-500 !text-danger-900 !placeholder-danger-700 !bg-danger-50 file:!border-none dark:!border-none dark:!bg-gray-950 dark:text-danger-400;
}

/* If in tailwind.config.json, darkMode: 'class', use this: */
.dark ::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Needed for Alpine JS */
[x-cloak=""] {
  display: none;
}

/*
  Needed for datetime inputs to have the correct size in Safari
  See: https://github.com/twbs/bootstrap/issues/34433#issuecomment-1831467352
*/
input::-webkit-datetime-edit {
  display: block;
  padding: 0;
}