:root {
  --card-bg-color: theme('colors.white');
  --card-color: theme('colors.gray.800');
  --card-border-style: solid;
  --card-border-width: theme('borderWidth.DEFAULT');
  --card-border-radius: theme('borderRadius.DEFAULT');
  --card-padding-x: theme('padding.4');
  --card-padding-y: theme('padding.3');
  --card-box-shadow: theme('boxShadow.DEFAULT');
}

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--card-bg-color);
  color: var(--card-color);
  border-radius: var(--card-border-radius);
  box-shadow: var(--card-box-shadow);

  // elements
  &-header {
    font-weight: theme('fontWeight.semibold');
    display: flex;
    padding: var(--card-padding-y) var(--card-padding-x) 0 var(--card-padding-x);
  }

  &-body {
    display: flex;
    flex-direction: column;
    padding: var(--card-padding-y) var(--card-padding-x);
  }

  &-footer {
    display: flex;
    gap: theme('spacing.2');
    padding: 0 var(--card-padding-x) var(--card-padding-y) var(--card-padding-x);
  }

  // modifiers
  &--bordered {
    border-style: var(--card-border-style);
    border-width: var(--card-border-width);
    border-color: var(--card-border-color);

    .card-header {
      border-bottom-style: var(--card-border-style);
      border-bottom-width: var(--card-border-width);
      border-bottom-color: var(--card-border-color);
      padding-bottom: var(--card-padding-y);
    }

    .card-footer {
      border-top-style: var(--card-border-style);
      border-top-width: var(--card-border-width);
      border-top-color: var(--card-border-color);
      padding-top: var(--card-padding-y);
    }
  }

  /* Shadows */
  &--shadow {
    --card-box-shadow: theme('boxShadow.DEFAULT');
  }

  &--shadow-sm {
    --card-box-shadow: theme('boxShadow.sm');
  }

  &--shadow-md {
    --card-box-shadow: theme('boxShadow.md');
  }

  &--shadow-lg {
    --card-box-shadow: theme('boxShadow.lg');
  }

  &--shadow-xl {
    --card-box-shadow: theme('boxShadow.xl');
  }

  &--shadow-2xl {
    --card-box-shadow: theme('boxShadow.2xl');
  }

  &--shadow-inner {
    --card-box-shadow: theme('boxShadow.inner');
  }

  &--shadow-none {
    --card-box-shadow: theme('boxShadow.none');
  }

  /* Colors */
  &-primary {
    --card-bg-color: theme('colors.primary.500');
    --card-color: theme('colors.white');
  }

  &-secondary {
    --card-bg-color: theme('colors.secondary.500');
    --card-color: theme('colors.white');
  }

  &-info {
    --card-bg-color: theme('colors.info.500');
    --card-color: theme('colors.white');
  }

  &-warning {
    --card-bg-color: theme('colors.warning.500');
    --card-color: theme('colors.white');
  }

  &-success {
    --card-bg-color: theme('colors.success.500');
    --card-color: theme('colors.white');
  }

  &-error {
    --card-bg-color: theme('colors.error.500');
    --card-color: theme('colors.white');
  }

  &-dark {
    --card-bg-color: theme('colors.gray.800');
    --card-color: theme('colors.white');
  }
}