@use 'mixins';

.⁂-layout__main--home {
  @apply black:space-y-0 black:divide-gray-800 dark:divide-primary-800 sm:space-y-4;
}

.⁂-compose-block {
  @include mixins.card($variant: rounded);
  @apply relative z-[1] border-gray-200 transition black:border-b black:border-gray-800 dark:border-gray-800 max-sm:border-b max-sm:shadow-none;

  &--dragging {
    @apply border-2 border-primary-600 border-dashed z-[99];
  }

  &--dragged-over {
    @apply ring-2 ring-offset-2 ring-primary-600;
  }

  &__body {
    @apply flex items-start gap-2;
  }

  &__form {
    @apply w-full translate-y-0.5;
  }
}

.⁂-load-more {
  @include mixins.button($theme: primary, $block: true);
}