.bk-html-root.bk-is-artboard,
.bk-html-root.bk-is-artboard .bk-body {
  @apply overflow-hidden h-screen w-screen;
}

.bk-html-root {
  --bk-root-offset-left-sidebar: 0px;
  --bk-root-offset-left-add-list: 0px;
  --bk-root-offset-left: calc(
    var(--bk-root-offset-left-sidebar) + var(--bk-root-offset-left-add-list)
  );
  --bk-root-offset-top: 80px;
  --bk-root-offset-bottom: 0px;
  --bk-root-offset-right: 0px;
  --bk-actions-height: 50px;
  @screen lg {
    --bk-root-offset-top: 50px;
    --bk-actions-height: 50px;
    --bk-root-offset-right: 50px;
  }
  &.bk-has-add-list-left {
    --bk-root-offset-left-add-list: 70px;
  }
  &.bk-has-sidebar-left {
    --bk-root-offset-left-sidebar: 400px;
  }

  &.bk-has-add-list-bottom {
    --bk-root-offset-bottom: 50px;
    @screen lg {
      --bk-root-offset-bottom: 70px;
    }
  }
}

.bk-html-root.bk-is-artboard {
  @apply overflow-hidden;

  .bk-body {
    @apply overflow-hidden;
  }
  #nuxt-root {
    @apply bg-mono-200 overflow-hidden fixed right-0;
    left: 0;
    /* top: var(--bk-root-offset-top); */
    top: 0;
    bottom: var(--bk-root-offset-bottom);
    contain: strict;
    &.bk-has-preview-open {
      @apply left-[445px];
    }
  }
}

.bk-artboard-debug-canvas {
  @apply fixed top-0 left-0 w-screen h-screen z-[9999999] pointer-events-none;
}

.bk-artboard-debug {
  @apply fixed top-0 left-0 w-screen  z-[9999999] pointer-events-none;
  @apply pt-80 p-10 bg-white/75;

  > div {
    @apply flex justify-between;
  }
}

.bk.bk-artboard-overview {
  @apply fixed top-offset-t right-offset-r w-[180px] h-[500px] z-artboard-overview bg-mono-100;
  @apply overflow-hidden contain-strict border border-mono-400;
  margin-top: 16px;
  margin-right: calc(var(--bk-artboard-scrollbar-size) + 16px);

  html.bk-has-sidebar-right & {
    margin-right: calc(
      var(--bk-artboard-scrollbar-size) + 16px + var(--bk-sidebar-width-right)
    );
  }

  .bk-artboard-overview-artboard {
    @apply bg-white absolute top-0 left-0 outline-mono-400 outline-1 outline pointer-events-none overflow-hidden;

    canvas {
      @apply absolute top-0 left-0 w-full h-full;
    }
  }

  .bk-artboard-overview-visible {
    @apply absolute top-0 left-0 size-full bg-mono-900/60 mix-blend-multiply;

    button {
      @apply relative top-0 left-0 bg-white cursor-move will-change-transform;
    }
  }
}
