// stylelint-disable

%editor-content {
  display: flex;
  flex-flow: column nowrap;
  gap: 0.5rem;

  h2, h3 {
    margin: 1rem 0 0 0
  }

  h4, h5 {
    margin: 0.5rem 0 0 0;
  }

  h6 {
    margin: 0.25rem 0 0 0;
  }

  ul, ol {
    margin: 0;
    padding: 0 0 0 1rem;
  }

  pre {
    margin: 0;
  }

  blockquote {
    background: var(--bs-tertiary-bg);
    border-left: 3px solid var(--bs-secondary);
    padding: 0.25rem 0.5rem;
    margin: 0;
  }

  .paragraph + .paragraph {
    margin-top: 1rem;
  }
}

.content-editor {
  width: 100%;

  .actions {
    display: flex;
    flex-flow: row wrap;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
    align-items: center;

    .btn {
      flex-grow: 1;
    }
  }
}

.editorjs {
  &.form-control {
    // max-height: 600px;
    // overflow: scroll;

    ::selection {
      color: var(--bs-body-color);
      background: var(--bs-secondary-bg);
    }
  }

  .ce-block a {
    text-decoration: $link-decoration;

    &:hover {
      text-decoration: $link-hover-decoration;
    }
  }

  .ce-block--selected {
    .ce-block__content {
      color: var(--bs-body-color);
      background: var(--bs-secondary-bg);
    }
  }

  .ce-toolbar {
    &__plus,
    &__settings-btn {
      background-color: var(--bs-secondary-bg);
      color: var(--bs-body-color);
      border-color: var(--bs-border-color);
    }
  }

  .ce-popover {
    --color-background: var(--bs-body-bg);
    --color-border: var(--bs-border-color);
    --color-border-icon: var(--bs-border-color);

    &__container {
      * {
        font-weight: normal;
      }
    }

    &-item,
    &-header__back-button,
    .ce-inline-tool {
      color: var(--bs-body-color);

      &:not(.ce-popover-item--confirmation) {
        .ce-popover-item__icon {
          background-color: transparent;
        }
      }

      &:hover {
        &:not(.ce-popover-item--confirmation) {
          background-color: var(--bs-secondary-bg);
        }
      }
    }
  }

  .ce-inline-toolbar {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);

    .ce-inline-tool-input {
      color: var(--bs-body-color);
      background: var(--bs-body-bg);
      border-color: var(--bs-border-color);
    }

    .ce-inline-toolbar__dropdown,
    .ce-inline-tool {
      &:hover {
        background-color: var(--bs-secondary-bg);
      }
    }
  }

  .ce-conversion-toolbar {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);

    .ce-conversion-tool {
      &__icon {
        background-color: var(--bs-tertiary-bg);
        box-shadow: 0 0 0 1px var(--bs-secondary);
      }

      &:hover {
        background-color: var(--bs-secondary-bg);
      }
    }
  }

  .cdx-search-field {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid var(--bs-border-color);
  }

  .codex-editor__redactor {
    @extend %editor-content;
  }

  .cdx-block {
    padding: 0;
  }

  .ce-header {
    padding: 0;
  }

  .cdx-list__item {
    padding: 0;
  }

  @media (width < 651px) {
    .ce-toolbar__actions {
      right: unset;
      left: -0.25rem;
    }
  }

  @media (width >= 651px) {
    .ce-block__content,
    .ce-toolbar__content {
      max-width: unset;
    }

    .ce-toolbar__plus {
      display: none;
    }

    .ce-block__content {
      margin-left: 1rem;
    }

    .ce-toolbar__content {
      margin-left: 1.25rem;
    }
  }
}