%section-button {
  width: calc(1lh + 2 * spacer(1));
  aspect-ratio: 1;
  display: grid;
  place-items: center;

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

.custom-sections {
  & > * {
    position: relative;

    > [role="toolbar"] {
      display: flex;
      gap: spacer(1);
      border: $border;
      border-radius: border-radius(1);
      width: max-content;
      order: -1;

      &:hover,
      &:focus-within {
        box-shadow: box-shadow(1);
      }

      > button,
      > details > summary {
        @extend %section-button;
      }

      @include breakpoint-up(lg) {
        flex-direction: column;
        position: absolute;
        top: spacer(4);
        left: spacer(4);
      }
    }
  }

  > section {
    display: flex;
    flex-direction: column;
    gap: spacer(6);

    .add-section {
      place-self: center;
      position: absolute;
      top: -$border-width;

      > summary {
        border: $border;
        border-bottom-left-radius: border-radius(1);
        border-bottom-right-radius: border-radius(1);
        @extend %section-button;
        position: relative;
        z-index: z-index(overlay);

        &:hover {
          box-shadow: box-shadow(1);
        }
      }

      ~ .add-section {
        top: 100%;
      }
    }
  }

  .rich-text-editor-toolbar[role="toolbar"] {
    @include bg-color(filled);
    border: $border;
    box-shadow: box-shadow(1);

    @include breakpoint-up(lg) {
      margin-top: -1 * spacer(8) - $border-width;
      margin-bottom: -1 * spacer(1) - $border-width;
    }
  }

  &.has-user > *:not(header) {
    @media (max-width: 1023px) {
      padding-top: 5rem;
    }
  }

  &.product > * {
    @media (min-width: 1024px) {
      padding-left: $body-padding-desktop-center;
      padding-right: $body-padding-desktop-center;
    }
  }
}
