.Draftail-AI-LoadingOverlay {
  background-color: rgba(255, 255, 255, 0.7);

  .w-theme-dark & {
    background-color: rgba(60, 60, 60, 0.7);
  }

  @media (prefers-color-scheme: dark) {
    .w-theme-system & {
      background-color: rgba(60, 60, 60, 0.7);
    }
  }

  -webkit-backdrop-filter: blur(8px);

          backdrop-filter: blur(8px);
  position: absolute;
  z-index: 19;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.Draftail-AI-LoadingOverlay > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.Draftail-AI-LoadingOverlay > span > svg {
  width: 50px;
  height: 50px;
  margin-bottom: 5px;
}

.Draftail-AI-LoadingOverlay > span {
  margin-bottom: 12px;
}

.Draftail-AI-ButtonDropdown {
  position: absolute;
  border-radius: 0.3125rem;
  background-color: var(--w-color-surface-tooltip);
  color: var(--w-color-text-label-menus-default);
  display: flex;
  flex-direction: column;
  min-width: 300px;
  z-index: 200;
  padding: 0.5rem 0;
}

.Draftail-AI-ButtonDropdown > button {
  color: var(--w-color-text-label-menus-default);
  background-color: transparent;
  background-color: initial;
  padding: 8px;
  text-align: left;
}

.Draftail-AI-ButtonDropdown > button span {
  font-weight: bold;
  display: block;
}

.Draftail-AI-ButtonDropdown > button:hover {
  background-color: var(--w-color-surface-menu-item-active);
  color: var(--w-color-text-label-menus-active);
}

/* Temp fix for wagtail issue https://github.com/wagtail/wagtail/issues/11302 */
.Draftail-CommentControl {
  display: none;

  .tab-content--comments-enabled & {
    display: inline-block;
  }
}

