petal_components

1.2.9
4.6.2 4.6.1 4.6.0 4.5.0 4.4.0 4.3.0 4.2.1 4.2.0 4.1.2 4.1.1 4.1.0 4.0.12 4.0.11 4.0.10 4.0.6 4.0.5 4.0.4 4.0.3 4.0.1 3.2.2 3.2.1 3.2.0 3.1.0 3.0.2 3.0.1 3.0.0 2.9.3 2.9.2 retired 2.9.1 retired 2.9.0 retired 2.8.4 2.8.3 2.8.2 2.8.1 2.8.0 2.7.4 2.7.3 2.7.2 2.7.1 2.7.0 2.6.1 2.6.0 2.5.2 2.5.1 2.5.0 2.4.3 2.4.2 2.4.1 2.4.0 2.3.0 2.2.1 2.2.0 2.1.2 2.1.1 2.1.0 2.0.6 2.0.5 2.0.4 2.0.3 2.0.2 2.0.1 2.0.0 1.9.3 1.9.2 1.9.1 1.9.0 1.8.0 1.7.1 1.7.0 1.6.2 1.6.1 1.6.0 1.5.5 1.5.4 1.5.3 1.5.2 1.5.1 1.5.0 1.4.9 1.4.8 1.4.7 1.4.6 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.0 1.2.14 1.2.13 1.2.12 1.2.11 1.2.10 1.2.9 1.2.8 1.2.7 1.2.6 1.2.5 1.2.4 1.2.3 1.2.2 1.2.1 1.2.0 1.1.6 1.1.5 1.1.4 1.1.3 1.1.2 1.1.1 1.1.0 1.0.8 1.0.7 1.0.6 1.0.5 1.0.4 1.0.3 1.0.2 1.0.1 1.0.0 0.19.10 0.19.9 0.19.8 0.19.7 0.19.6 0.19.5 0.19.4 0.19.3 0.19.2 0.19.1 0.19.0 0.18.5 0.18.4 0.18.3 0.18.2 0.18.1 0.18.0 0.17.7 0.17.6 0.17.5 0.17.4 0.17.3 0.17.2 0.17.1 0.17.0 0.16.0 0.15.0 0.14.1 0.14.0 0.13.7 0.13.6 0.13.5 0.13.4 0.13.3 0.13.2 0.13.1 0.13.0 0.12.0 0.11.4 0.11.3 0.11.2 0.11.1 0.11.0 0.10.8 0.10.7 0.10.6 0.10.5 0.10.4 0.10.3 0.10.2 0.10.1 0.10.0 0.9.3 0.9.2 0.9.1 0.9.0 0.8.0 0.7.0 0.6.1 0.6.0 0.5.1 0.5.0 0.4.0 0.3.2 0.3.1 0.3.0 0.2.2 0.2.1 0.2.0 0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
HexDocs
Current section
Files
Jump to
Readme 190 Versions 4 Dependencies Dependants Files Activity
petal_components assets default.css
Raw
assets/default.css

/* 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 */

.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 - 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-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--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-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--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-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--success {
  @apply text-white border-transparent bg-success-600 hover:bg-success-700 active:bg-success-800 focus:bg-success-700;
}
.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--warning {
  @apply text-white border-transparent bg-warning-600 hover:bg-warning-700 active:bg-warning-800 focus:bg-warning-700;
}
.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--danger {
  @apply text-white border-transparent bg-danger-600 hover:bg-danger-700 active:bg-danger-800 focus:bg-danger-700;
}
.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--gray {
  @apply text-white bg-gray-600 border-transparent active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700;
}
.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--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;
}

/* 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 rounded-full;
}

.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 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 disabled:cursor-not-allowed;
}

/* 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-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-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-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-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-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-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-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;
}
.pc-alert__dismiss-button--info {
  @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-900;
}
.pc-alert__dismiss-button--success {
  @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-900;
}
.pc-alert__dismiss-button--warning {
  @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-900;
}
.pc-alert__dismiss-button--danger {
  @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-900;
}

/* Alerts - colors */

.pc-alert--info {
  @apply text-info-800 bg-info-100 dark:bg-info-200 dark:text-info-800;
}
.pc-alert--success {
  @apply text-success-800 bg-success-100 dark:bg-success-200 dark:text-success-800;
}
.pc-alert--warning {
  @apply text-warning-800 bg-warning-100 dark:bg-warning-200 dark:text-warning-800;
}
.pc-alert--danger {
  @apply text-danger-800 bg-danger-100 dark:bg-danger-200 dark:text-danger-800;
}

/* Alerts - with icon */

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

/* Alerts - with icon colors */

.pc-alert__dismiss-button--info {
  @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-900;
}

/* Forms */

.pc-form-field-wrapper {
  @apply mb-6;
}
:not(.phx-no-feedback).pc-form-field-wrapper--error input, :not(.phx-no-feedback).pc-form-field-wrapper--error select, :not(.phx-no-feedback).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;
}
:not(.phx-no-feedback).pc-form-field-wrapper--error .pc-switch .pc-switch__fake-input {
  @apply bg-danger-200 border-danger-500;
}
:not(.phx-no-feedback).pc-form-field-wrapper--error .pc-label, :not(.phx-no-feedback).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;
}
.phx-no-feedback.pc-error, .phx-no-feedback .pc-error {
  @apply hidden;
}
.pc-form-field-error {
  @apply mt-1 text-xs italic text-danger-500;
}
.phx-no-feedback.pc-form-field-error {
  @apply hidden;
}
.phx-no-feedback .pc-form-field-error {
  @apply hidden;
}
.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 w-10 h-5 cursor-pointer;
}
.pc-switch__input {
  @apply absolute w-10 h-5 bg-white border-none rounded-full cursor-pointer peer-checked:border-0 checked:bg-transparent checked:focus:bg-transparent checked:hover:bg-transparent dark:bg-gray-800;
}
.pc-switch__fake-input {
  @apply absolute h-6 mx-auto transition-colors duration-200 ease-in-out bg-gray-200 border rounded-full pointer-events-none w-11 dark:bg-gray-700 dark:border-gray-600 peer-checked:bg-primary-500;
}
.pc-switch__fake-input-bg {
  @apply absolute left-0 inline-block w-5 h-5 transition-transform duration-200 ease-in-out transform translate-x-0 bg-white rounded-full shadow pointer-events-none peer-checked:translate-x-5 ring-0;
}
.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;
}
.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-gray-800 dark:file:text-primary-500;
}
.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;
}

/* 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-900 dark:hover:bg-gray-800 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__ellipsis {
  @apply w-5 h-5;
}

/* Loading */

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

/* 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;
}

/* 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 text-gray-300 dark:text-gray-300 dark:bg-gray-700 top-[12%] scale-[1.15] transform;
}

/* 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 hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 border dark:border-gray-700 border-gray-200 text-gray-600 hover:text-gray-800;
}
.pc-pagination__item__previous__chevron {
  @apply w-5 h-5 text-gray-600 dark:text-gray-400;
}
.pc-pagination__item__next {
  @apply ml-2 inline-flex items-center justify-center rounded leading-5 px-2.5 py-2 bg-white hover:bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 dark:border-gray-700 border border-gray-200 text-gray-600 hover:text-gray-800;
}
.pc-pagination__item__next__chevron {
  @apply w-5 h-5 text-gray-600 dark:text-gray-400;
}
.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 {
  @apply min-w-full overflow-hidden divide-y divide-gray-200 rounded-sm table-auto ring-1 ring-gray-200 dark:ring-0 dark:divide-y-0 dark:divide-gray-800 sm:rounded;
}
.pc-table__th {
  @apply px-6 py-3 text-xs font-medium tracking-wider text-left text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-300;
}
.pc-table__tr {
  @apply bg-white border-b dark:border-gray-700 dark:bg-gray-800 last:border-none;
}
.pc-table__td {
  @apply px-6 py-4 text-sm text-gray-500 dark:text-gray-400;
}
.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--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;
}

/* 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-4 h-4 fill-current;
}
.pc-modal__content {
  @apply p-5;
}

/* 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 transform;
}
.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;
}

/* 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;
}

/* 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:not(.phx-no-feedback) {
  @apply !text-danger-900 dark:!text-danger-200;
}

textarea.has-error:not(.phx-no-feedback), input.has-error:not(.phx-no-feedback):not(:checked),
select.has-error:not(.phx-no-feedback) {
  @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:not(.phx-no-feedback) {
  @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-[#160B0B] 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;
}
Operator	Description	Example
name:	Match package name. Supports * wildcards and repo/package form	name:phx* or name:hexpm/phoenix
description:	Full-text search of package descriptions	description:auth
depends:	Packages depending on a given package. Supports repo:package form	depends:ecto or depends:hexpm:ecto
build_tool:	Filter by build tool	build_tool:mix
updated_after:	Packages updated after an ISO8601 datetime	updated_after:2025-01-01T00:00:00Z
extra:	Match custom metadata (key,value). Nested keys are separated by commas	extra:license,MIT