@layer components {
  .card {
    $card: &;
    @apply w-full rounded-primary bg-white shadow transition-all duration-300 dark:bg-slate-800;

    // Direct elements
    &-header {
      @apply border-b border-b-slate-200 px-4 py-4 dark:border-slate-700 sm:px-6;
    }

    &-body {
      @apply p-4 sm:p-6;
    }

    &-footer {
      @apply flex justify-end gap-2 border-t border-slate-200 px-4 py-4 dark:border-slate-700 sm:px-6;
    }

    // Child elements
    &-title {
      @apply text-lg;
    }

    &-subtitle {
      @apply text-sm text-slate-500 dark:text-slate-400;
    }

    &-content {
      @apply text-sm text-slate-600 dark:text-slate-300;
    }

    // Modifier classes
    &-primary {
      @apply bg-primary-500 dark:bg-primary-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }

    &-secondary {
      @apply bg-secondary-500 dark:bg-secondary-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }

    &-success {
      @apply bg-success-500 dark:bg-success-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }

    &-danger {
      @apply bg-danger-500 dark:bg-danger-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }

    &-warning {
      @apply bg-warning-500 dark:bg-warning-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }

    &-info {
      @apply bg-info-500 dark:bg-info-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }

    &-dark {
      @apply bg-dark-500 dark:bg-dark-500;

      #{$card}-title,
      #{$card}-content {
        @apply text-slate-100;
      }
    }
  }
}
