@utility card {
  @layer base {
    --card-bg: var(--background-color-subtle);
    --card-color: var(--text-color-muted);
    --card-font-size: var(--text-sm);
    --card-border-width: var(--border-width);
    --card-border-color: var(--border-color-default);
    --card-border-radius: var(--radius-lg);
    --card-padding-x: --spacing(4);
    --card-padding-y: --spacing(4);
    --card-cap-padding-x: --spacing(2);
    --card-cap-padding-y: --spacing(2);
    --card-cap-bg: transparent;
    --card-cap-color: null;
    --card-title-color: var(--text-color-default);
    --card-title-space-y: --spacing(2);
    --card-title-font-weight: var(--font-weight-bold);
    --card-subtitle-font-weight: var(--font-weight-medium);
    --card-overlay-brightness: 0.6;

    @apply relative flex flex-col min-w-0 wrap-break-word
    text-(--card-color)
    text-(length:--card-font-size)
    rounded-(--card-border-radius)
    bg-(--card-bg)
    border-(length:--card-border-width)
    border-(--card-border-color);
  }
}
@utility card-action {
  @layer base {
    @apply cursor-pointer text-left transition-[background] duration-200 no-underline;
    @variant hover {
      --card-bg: var(--background-color-muted);
    }
  }
}
@utility card-aside {
  @layer base {
    @apply flex-row;
  }
}

@utility card-img-top {
  @layer base {
    @apply rounded-t-(--card-border-radius) w-full;
  }
}
@utility card-img-bottom {
  @layer base {
    @apply rounded-b-(--card-border-radius) w-full;
  }
}
@utility card-img-right {
  @layer base {
    @apply rounded-r-(--card-border-radius) h-full object-cover;
  }
}
@utility card-img-left {
  @layer base {
    @apply rounded-l-(--card-border-radius) h-full object-cover;
  }
}
@utility card-img {
  @layer base {
    @apply rounded-none w-full;
  }
}

@utility card-header {
  @layer base {
    @apply mb-0
    px-(--card-padding-x)
    py-(--card-padding-y)
    text-(--card-cap-color)
    bg-(--card-cap-bg)
    border-b-(length:--card-border-width)
    border-(--card-border-color);

    &:first-child {
      @apply rounded-t-(--card-border-radius);
    }
  }
}

@utility card-body {
  @layer base {
    @apply flex-[1_1_auto]
    px-(--card-padding-x) 
    py-(--card-padding-y);
  }
}

@utility card-footer {
  @layer base {
    @apply px-(--card-cap-padding-x) 
    py-(--card-cap-padding-y)
    text-(--card-cap-color)
    bg-(--card-cap-bg);

    &:last-child {
      @apply rounded-b-(--card-border-radius);
    }
  }
}

@utility card-title {
  @layer base {
    @apply text-(--card-title-color)
    font-(--card-title-font-weight)
    mb-(--card-title-space-y);
    &:has(+ .card-subtitle) {
      @apply mb-0;
    }
  }
}

@utility card-subtitle {
  @layer base {
    @apply font-(--card-subtitle-font-weight)
    mb-(--card-title-space-y);
  }
}

@utility card-text {
  @layer base {
    @apply text-(length:--card-font-size);
  }
}

@utility card-img-overlay {
  @layer components {
    --card-title-color: var(--color-white);
    --card-border-width: 0px;
    @apply overflow-hidden rounded-lg;
    img {
      @apply brightness-(--card-overlay-brightness);
    }
    .card-body {
      @apply absolute top-0 right-0 bottom-0 left-0
      p-(--card-padding-x)
      rounded-(--card-border-radius) text-white;
    }
  }
}

@utility card-group {
  @layer base {
    --card-group-margin: --spacing(4);
    > .card {
      margin-bottom: var(--card-group-margin);
    }

    @variant sm {
      display: flex;
      flex-flow: row wrap;

      > .card {
        flex: 1 0 0;
        margin-bottom: 0;

        & + .card {
          margin-left: 0;
          border-left: 0;
        }

        &:not(:last-child) {
          border-start-end-radius: 0;
          border-end-end-radius: 0;

          > .card-img-top,
          > .card-header {
            border-top-right-radius: 0;
          }

          > .card-img-bottom,
          > .card-footer {
            border-bottom-right-radius: 0;
          }
        }

        &:not(:first-child) {
          border-start-start-radius: 0;
          border-end-start-radius: 0;

          > .card-img-top,
          > .card-header {
            border-top-left-radius: 0;
          }

          > .card-img-bottom,
          > .card-footer {
            border-bottom-left-radius: 0;
          }
        }
      }
    }
  }
}