@use 'prose/utils' as prose_utils;

.ck-editor__main {
  all: initial;

  @apply @container/prose;
}

.ck-content {
  @apply antialiased font-sans;
  @include prose_utils.prose;
  @apply wysiwyg-xl;

  .drupal-media.ck-widget {
    margin-top: var(--ck-media-block-margin, 0) !important;
    margin-bottom: var(--ck-media-block-margin, 0) !important;
  }

  .table {
    @apply w-full;
  }

  .note {
    padding: var(--note-padding, 1rem);
  }

  :where(a,button).btn {
    padding: var(--btn-padding-block, 1.5rem) var(--btn-padding-inline, 0.75rem);
    font-size: var(--btn-font-size, 1rem);
    font-weight: var(--btn-font-weight, 600);
  }
}

.ck-content.ck-editor__editable {
  max-width: none;
  min-height: var(--wysiwyg-min-height, 15em);

  .ck.ck-editor__main > & {
    @apply  text-neutral-950 ;
  }
}

:where(
    [data-editor-active-text-format='basic_html'],
    [data-editor-active-text-format='full_html']
  )
  + .ck
  .ck-editor__editable {
  --wysiwyg-min-height: 25em;
}

.ck .drupal-media {
  @apply ms-0;

  &:has(.media--type-remote-video) {
    @apply w-full;
  }
}
