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

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

/* 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 -translate-y-full -top-1 group-hover/pc-icon-button:flex group-hover/pc-icon-button:visible group-hover/pc-icon-button:opacity-100 opacity-0 transition-opacity duration-300;
}

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

.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 text-success-600 border 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 text-warning-600 border 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 text-danger-600 border 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 cursor-pointer text-sm font-normal text-gray-900 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 cursor-pointer w-5 h-5 transition-all duration-150 ease-linear border-gray-300 rounded 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;
}

/* 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 rounded-xl shadow-lg 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;
}