.field {
  @apply max-h-full;
}
.control {
  & :deep(.ql-editor) {
    /* TODO: Try and get this to work? idk why the variable isn't getting defined.
      min-height: s-bind("@height")
      */
    @apply prose max-w-none p-0;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";
    min-height: 224px;
  }

  & :deep(.ql-toolbar):deep(.ql-snow) {
    @apply rounded-t-xl;
    --tw-border-opacity: 0.2;
    border: 1px solid hsl(var(--bc) / var(--tw-border-opacity));
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
      "Noto Color Emoji";
  }
  & :deep(.ql-container) {
    @apply rounded-t-none textarea textarea-bordered;
  }
  & .has-upload :deep(.ql-container) {
    @apply rounded-b-none;
  }
  & :deep(.ql-stroke) {
    --tw-text-opacity: 1;
    stroke: hsl(var(--n) / var(--tw-text-opacity));
  }
  & :deep(.ql-fill) {
    --tw-text-opacity: 0.8;
    fill: hsl(var(--n) / var(--tw-text-opacity));
  }
  & :deep(.ql-picker):deep(.ql-expanded) :deep(.ql-picker-label) {
    @apply rounded-md;
    --tw-border-opacity: 0.2;
    border: 1px solid hsl(var(--b) / var(--tw-border-opacity));
  }
  & :deep(.ql-picker-label) {
    color: hsl(var(--n));
  }
  /*
      & :global(.ql-editor) :global(p) {
      @apply py-2;
      }
      */
  /*
      & :global(.ql-picker) :global(.ql-picker-options) {
      @apply menu rounded-box
      }
      */
}
