@tinymceai-dim-overlay-color: fade(@color-black, 20%);

.tox {
  .tox-ai__preview-host {
    width: 100%;
    height: 100%;
    position: relative;

    .tox-ai__preview-layer {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
    }

    .tox-ai__preview-frame-wrap {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;

      .tox-ai__iframe {
        background-color: @edit-area-iframe-background-color;
        border: @edit-area-border;
        width: 100%;
        height: 100%;
        min-height: 0;
        position: relative;
      }
    }

    .tox-ai__preview-footer {
      flex: 0 0 auto;
      background: var(--tox-private-background-color, @background-color);
      border-top: 1px solid @border-color-light;


      .tox-ai__preview-footer-toolbar {
        display: flex;
        justify-content: flex-end;
        gap: 8px;
        padding: 12px @pad-md;
      }
    }
  }

  .tox-ai__preview-host:empty {
    pointer-events: none;
  }

  .tox-ai__preview-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;

    &--hidden {
      visibility: hidden;
    }

    &--pass-through {
      pointer-events: none;
    }

    &--dim {
      background: @tinymceai-dim-overlay-color;
    }

    &--centered {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &--clipped {
      overflow: hidden;
    }
  }
}