.mention {
  color: var(--mantine-color-blue-4);
}

.instagramEmbed {
  aspect-ratio: 9 / 16;
  max-height: 1060px;
  max-width: 50%;
  overflow: hidden;

  @container (max-width: theme('screens.sm')) {
    max-width: 100%;
  }
}

.strawPollEmbed {
  aspect-ratio: 4 / 3;
  max-height: 480px;
  pointer-events: auto !important;
}

.bubbleTooltip {
  background-color: light-dark(var(--mantine-color-white), var(--mantine-color-dark-6));
}

.richTextEditor {
  // margin-top and margin-bottom should be set inline via style prop if they depend on description/error
  // border-color should be set inline via style prop if it depends on error

  // Fixes gapcursor color for dark mode
  :global .ProseMirror-gapcursor:after {
    border-top: 1px solid light-dark(black, white);
  }

  :global .ProseMirror {
    min-height: var(--editor-min-height, 50px);
    word-break: break-word;

    p.is-editor-empty:first-of-type::before {
      // color should be set inline via style prop if it depends on error
      font-size: var(--editor-font-size, 14px);
    }
  }

  iframe {
    pointer-events: none;
  }
}


.htmlRenderer {

  // Remove margin from the last paragraph
  & p:last-of-type {
    margin-bottom: 0;
  }

  // Break words in paragraphs
  p {
    word-break: break-word;
  }

  // Remove border from iframes
  iframe {
    border: none;
  }

  // Code block styling
  code {
    white-space: break-spaces;
  }

  // Instagram embed styling
  div[data-type="instagram"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 769px;

    &>iframe {
      width: 50%;
      overflow: hidden;
      flex-grow: 1;
    }

    @container (max-width: theme('screens.md')) {
      height: 649px;
    }

    @container (max-width: theme('screens.sm')) {
      height: 681px;

      &>iframe {
        width: 100%;
      }
    }
  }

  // StrawPoll embed styling
  div[data-type="strawPoll"] {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 480px;

    &>iframe {
      flex-grow: 1;
    }
  }

  // Prevent headings from being hidden by the fixed navbar
  h1,
  h2,
  h3 {
    &:before {
      display: block;
      content: '';
      margin-top: calc(var(--mantine-spacing-xs, 8px) * -7);
      height: calc(var(--mantine-spacing-xs, 8px) * 7 + var(--mantine-spacing-xs, 8px));
      visibility: hidden;
    }
  }

  // Horizontal rule styling
  hr {
    height: 4px;
    padding: 0;
    margin: 24px 0;
    background-color: light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
    border: 0;
  }
}
