.detail-card {
  &-header {
    @apply flex items-center align-middle;

    &-divider {
      @apply m-0;
    }
  }

  &-avatar {
    @apply mr-3 w-12 h-12 rounded-full;
  }

  &-title {
    @apply inline-flex flex-col h-12 justify-start;

    &-main {
      @apply font-bold;
    }

    &-sub {
      @apply text-sm;
    }
  }

  &-actions {
    @apply flex items-center gap-x-2 lg:ml-auto;

    &-button {
      @apply btn btn-sm;
    }

    &-mobile {
      @apply lg:hidden;
    }

    &-desktop {
      @apply max-lg:hidden;
    }
  }

  &-body {
    @apply flex flex-col w-full lg:flex-row;

    &-left {
      @apply flex flex-col min-h-[150px] lg:basis-3/4 max-w-[65%];
    }

    &-divider {
      @apply divider lg:divider-horizontal;
    }

    &-right {
      @apply flex flex-col justify-start gap-y-2 lg:basis-1/4 lg:max-w-[45%];
    }
  }

  &-meta-item {
    @apply text-sm truncate;

    &-link {
      @apply hover:text-primary hover:transition;
    }
  }
}
