.whiteboard-dashboard-bg-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

h1.title.whiteboard-dashboard-title {
  padding-right: 0;
}

.dashboard-bg-card {
  background-color: var(--ls-secondary-background-color);
  border: 1px solid var(--ls-border-color);
  opacity: 0.3;
}

.dashboard-card {
  @apply rounded-lg flex flex-col gap-1 overflow-hidden font-medium;
  height: 300px;

  .dashboard-card-checkbox {
    @apply flex items-center justify-center rounded flex-shrink-0;
    border: 2px solid transparent;
    visibility: hidden;
    width: 24px;
    height: 24px;
    transform: translateX(4px);

    &:focus-within {
      border-color: var(--ls-border-color);
    }

    .form-checkbox {
      top: 0;
    }
  }

  &:is(:hover, [data-checked='true']) .dashboard-card-checkbox {
    visibility: visible;
  }
}

.dashboard-preview-card {
  @apply transition;
  border: 1px solid var(--ls-border-color);
}

.dashboard-create-card {
  @apply items-center justify-center relative;
  background-color: or(--ls-create-whiteboard-background, --lx-gray-02, --ls-secondary-background-color);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
  border: 1px solid transparent;
}

.dark .dashboard-create-card {
  background-color: or(--ls-create-whiteboard-background, --lx-gray-03, --ls-secondary-background-color);
}

.dashboard-create-card i {
  font-size: 24px;
}

.dashboard-create-card-caption {
  position: absolute;
  width: 100%;
  bottom: 12px;
  display: flex;
  justify-content: center;
  font-size: 14px;
}

.dashboard-create-card:hover {
  background-color: var(--ls-selection-background-color);
  box-shadow: 0 4px 8px -2px rgba(16, 24, 40, 0.1),
  0 2px 4px -2px rgba(16, 24, 40, 0.06);
  border: 1px solid var(--ls-page-blockquote-border-color);
}

.dashboard-card-title {
  @apply px-4 py-3 flex flex-col;
  gap: 4px;
  border-bottom: 1px solid var(--ls-border-color);
  background-color: or(--ls-whiteboard-card-title-background, --lx-gray-02, --ls-secondary-background-color);
  font-size: 16px;
}

.dark .dashboard-card-title {
  background-color: or(--ls-whiteboard-card-title-background, --lx-gray-03, --ls-secondary-background-color);
}

.dashboard-card-title-name {
  @apply truncate;
  color: var(--ls-primary-text-color);
}

.single-block > :is(.block-content-wrapper, .editor-wrapper) {
  width: 100% !important;
  padding: 8px 12px;
  border-radius: 8px;
}

.tl-logseq-cp-container > .page {
  padding: 12px;
}

.tl-logseq-cp-container > .ls-block {
  padding: 0;
}

input.tl-text-input {
  border: none;
  padding: 0;

  &:focus {
    box-shadow: none;
  }
}

/**
 * ???
 */
.open-page-ref-link {
  @apply text-sm px-1 flex items-center;
  border-radius: 2px;
  flex-shrink: 0;
  background-color: var(--ls-quaternary-background-color);
  font-size: 14px;
  color: var(--ls-primary-text-color);
  vertical-align: baseline;
}

.whiteboard-page-refs-count {
  @apply whitespace-nowrap;
  border-radius: 8px;
  background: var(--ls-primary-background-color);
}

.whiteboard-page-refs-count:hover,
.whiteboard-page-refs-count.open {
  filter: brightness(0.9);
}

.whiteboard-page-title-root {
  @apply shadow-md flex items-center;
  position: absolute;
  left: 2.5rem;
  top: 0;
  padding: 4px;
  border-radius: 0 0 12px 12px;
  z-index: 2000;
  gap: 4px;
  line-height: 1.4;
  background: or(--ls-whiteboard-title-background, --lx-gray-01, --ls-primary-background-color);
}

.dark .whiteboard-page-title-root {
  background: or(--ls-whiteboard-title-background, --lx-gray-02, --ls-primary-background-color);
}

.whiteboard-page-title {
  @apply px-2 py-1 flex-1 overflow-ellipsis overflow-hidden;

  font-size: 20px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: var(--ls-secondary-background-color);

  &-root {
    max-width: 70%;
    overflow: hidden;
  }

  .page-title-sizer-wrapper {
    width: calc(100% - 20px);

    > .title {
      @apply whitespace-nowrap min-w-[100px];
    }
  }

  .edit-input {
    width: 100%;
    border: none;
    box-shadow: none;
    padding: 0;
  }
}

.whiteboard-page-title:hover {
  background-color: var(--ls-tertiary-background-color);
}

.whiteboard-page-title:focus-within {
  border: 1px solid var(--ls-border-color);
  box-shadow: 0 0 0 4px var(--ls-focus-ring-color);
}

.whiteboard-page-refs-count-label {
  @apply flex gap-1 items-center;
}

.whiteboard-page-refs {
  @apply flex-shrink-0;
}

.whiteboard-page[data-breakpoint=sm] {
  .whiteboard-page-refs-count-label {
    display: none;
  }

  .whiteboard-page-title-root {
    left: 0.5rem;
  }

  .tl-action-bar {
    left: 0.5rem;
    bottom: 0;
  }

  .tl-primary-tools {
    right: 0;
  }
}

/* disable user select globally for whiteboard on iOS/iPad. Is there a better option? */
html:is(.is-ios, is-native-ios, is-native-ipad) [data-page="whiteboard"] * {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cp__whiteboard-welcome {
  > .head-bg {
    @apply flex m-auto mb-10 w-auto sm:w-[500px];

    background-image: url("../img/whiteboard-welcome-dark.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 86px;
    max-width: 90vw;

    > strong {
      @apply block rounded text-gray-700 text-[10px] font-semibold px-2 py-0.5
      m-auto translate-y-8 uppercase;

      background-color: var(--ls-link-text-color);
      color: var(--ls-primary-background-color);
    }
  }

  > h1 {
    color: var(--ls-title-text-color);
  }

  > h1, p {
    @apply flex justify-center text-center;
  }

  > p {
    @apply text-sm mx-10;

    max-width: 540px;
  }
}


html[data-theme='light'] {
  .cp__whiteboard-welcome {
    > .head-bg {
      background-image: url("../img/whiteboard-welcome-light.png");
    }
  }
}