@import '../../../../scss/styles';

@layer payload-default {
  .ContentEditable__root > div:has(.lexical-block) {
    // Fixes a bug where, if the block field has a Select field, the Select field's dropdown menu would be hidden behind the lexical editor.
    z-index: 1;
  }

  [data-lexical-decorator='true']:has(.lexical-block) {
    width: auto;
  }

  .lexical-block-not-found {
    color: var(--theme-error-500);
    font-size: 1.1rem;
  }

  .lexical-block {
    display: flex;
    flex-direction: column;
    gap: calc(var(--base) / 2);
    @extend %body;

    &__row {
      .collapsible__toggle-wrap {
        padding-inline-start: base(0.4);
      }
    }

    margin-block: base(0.4);

    &__header {
      h3 {
        margin: 0;
      }
    }

    &__header-wrap {
      display: flex;
      align-items: flex-end;
      width: 100%;
      justify-content: space-between;
    }

    &__heading-with-error {
      display: flex;
      align-items: center;
      gap: calc(var(--base) * 0.5);
    }

    &--has-no-error {
      > .array-field__header .array-field__heading-with-error {
        color: var(--theme-text);
      }
    }

    &--has-error {
      > .array-field__header {
        color: var(--theme-error-500);
      }
    }

    &__error-pill {
      align-self: center;
    }

    &__header-actions {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
    }

    &__header-action {
      @extend %btn-reset;
      cursor: pointer;
      margin-left: calc(var(--base) * 0.5);

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }

    .collapsible {
      &__header-wrap {
        //  Make more space for the block header (default right: is `calc(var(--base) * 3)`) so that the remove button aligns nicely to the right
        right: calc(var(--base) * 1.5);
      }
    }

    &__removeButton.btn {
      margin: 0;
      &:hover {
        background-color: var(--theme-elevation-200);
      }
    }

    &__editButton.btn {
      margin: 0;
      &:hover {
        background-color: var(--theme-elevation-200);
      }
    }

    &__block-header {
      pointer-events: none;
    }

    &__block-header * {
      pointer-events: all;
    }

    &__block-header,
    &__block-header > div:first-child {
      display: flex;
      max-width: 100%;
      width: 100%;
      overflow: hidden;
      gap: calc(var(--base) * 0.375);
      justify-content: flex-start;
      pointer-events: none;

      & > * {
        pointer-events: all;
      }
    }

    &__block-header > div:nth-child(2) {
      display: flex;
      justify-content: flex-end;
    }

    &__block-number {
      flex-shrink: 0;
    }

    &__block-pill {
      flex-shrink: 0;
      display: block;
      line-height: unset;
    }

    &__rows {
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 2);
    }

    &__drawer-toggler {
      background-color: transparent;
      margin: 0;
      padding: 0;
      border: none;
      align-self: flex-start;

      .btn {
        color: var(--theme-elevation-400);
        margin: 0;

        &:hover {
          color: var(--theme-elevation-800);
        }
      }
    }
  }

  html[data-theme='light'] {
    .blocks-field--has-error {
      .section-title__input,
      .blocks-field__heading-with-error {
        color: var(--theme-error-750);
      }
    }
  }

  html[data-theme='dark'] {
    .blocks-field--has-error {
      .section-title__input,
      .blocks-field__heading-with-error {
        color: var(--theme-error-500);
      }
    }
  }
}
