@import '../../styles/vars/breakpoints.css';

.textContent {
  .container {
    /* max-width: var(--component-max-width); */
    width: var(--component-max-width);
    margin-right: auto;
    margin-left: auto;
    @media (--sm-and-down) {
      width: 100%;
    }
  }

  &.inside .container {
    width: 100%;
    margin: 0;
  }

  :global(.quill-text) {
    white-space: pre-wrap;
    p + br,
    p + p {
      /* margin-top: 25px; */
      white-space: pre-wrap;
    }
    p + p {
      /* margin-top: 25px; */
      white-space: pre-wrap;
    }

    :global(.q-br)+ :global(.q-br){
      /* margin-top: 25px; */
      :last-child {
        margin-top: 0;
      }
      @media (--ms-and-down) {
        margin-top: 20px;
      }
    }
  }
}

.textContent {
  /* margin: 10px 0 22px; */
  margin: rem(12px) 0 rem(14px);
  &.first-child {
    margin: rem(30px) 0 rem(13px);
  }

  &.last-child {
    margin: rem(10px) 0 rem(30px);
  }

  &.only-child {
    margin: rem(30px) 0;
  }
}

.text {
  margin: 0;
  font-weight: 400;
  font-size: rem(16px);
  line-height: 2em;
  word-spacing: 0.4px;
  width: 100%;
  &.editing {
    &:active,
    &:focus,
    &:hover {
      width: 100%;
      outline: auto !important;
      outline-color: #4D90FE !important;
      outline-width: 5px !important;
      outline-offset: -2px  !important;
      outline-style: auto  !important;
    }
  }

  :global(p) {
    margin: 0;
  }  
  :global(p) + :global(.q-br) {
    margin-top: 24px;
    white-space: pre-wrap;
  }
}

.text.align--center :global(.ql-editor) {
  text-align: center !important;
}

.text.align--center p {
  text-align: center !important;
}