@import './partials/preflight.css';
@import './partials/transitions.css';
@import './partials/actions.css';
@import './partials/toolbar.css';
@import './partials/history.css';
@import './partials/errors.css';
@import './partials/options.css';
@import './partials/dialog.css';
@import './partials/forms.css';
@import './partials/clipboard.css';
@import './partials/sidebar.css';
@import './partials/library.css';
@import './partials/comments.css';
@import './partials/structure.css';
@import './partials/resizable.css';
@import './partials/fieldAreas.css';
@import './partials/messages.css';
@import './partials/settings.css';
@import './partials/search.css';
@import './partials/AddList.css';
@import './partials/artboard.css';
@import './partials/debug.css';
@import './partials/scaleToFit.css';
@import './partials/DraggingOverlay.css';
@import './partials/Selection.css';
@import './partials/EditableField.css';
@import './partials/Assistant.css';
@import './partials/AppMenu.css';
@import './partials/Animator.css';
@import './partials/FormOverlay.css';
@import './partials/ResponsivePreview.css';
@import './partials/Help.css';
@import './partials/Theme.css';
@import './partials/MediaLibrary.css';
@import './partials/CommandPalette.css';
@import './partials/ContextMenu.css';
@import './partials/Tour.css';
@import './partials/Error.css';
@import './partials/Translations.css';
@import './partials/AnimationCanvas.css';
@import './partials/Scrollbar.css';
@import './partials/SystemRequirements.css';
@import './partials/Pagination.css';
@import './partials/Validations.css';
@import './partials/ProxyField.css';
@import './partials/infobox.css';
@import './partials/Diff.css';
@import './indicator.css';

@import './components/button.css';
@import './components/toggle.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'PB Inter';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url('/Inter.var.woff2') format('woff2');
}

html {
  --bk-z-index-base: 50000;
}

.bk {
  @apply font-sans text-base text-mono-950 tracking-normal;
  border-color: theme('colors.mono.200');

  &.bk-loading-overlay {
    @apply bg-mono-100/90 absolute top-0 left-0 w-full h-full z-init-overlay  flex items-center justify-center;
    &.bk-is-screen {
      @apply fixed w-screen h-screen backdrop-blur-xl;
    }
    svg {
      @apply w-100 h-100 text-mono-200 animate-spin fill-mono-400;
    }
  }
}

@keyframes pbSelectArea {
  from {
    stroke-dashoffset: 0;
  }
  to {
    stroke-dashoffset: 8;
  }
}

.bk-body-loading {
  cursor: wait;
  .bk-draggable-list-container,
  .bk-control {
    pointer-events: none;
  }
}

.bk-body {
  .bk-main-canvas {
    @apply fixed top-0 left-1/2 xl:w-[80vw] w-screen lg:w-full lg:min-w-[1280px] max-w-[1920px] pointer-events-none z-10;
    background: white;
    user-select: none;
    image-rendering: crisp-edges;
    backface-visibility: hidden;
    transform-origin: 0 0;
    /* Set initial position to be centered. The artboard feature will update it on mount. */
    transform: translateX(-50%) translateY(100px);
    contain: layout paint inline-size style;
  }
}

.bk-draggable-list-container {
  @apply pointer-events-auto select-none;
  .bk-list-item {
    @apply bg-white p-20 font-bold !rounded-none;
    &:after {
      @apply hidden;
    }
  }
  .bk-list-item-inner {
    @apply flex gap-20 h-full items-center;
  }
  .bk-list-item-icon {
    width: 2rem;
    height: 2rem;
  }
}

.bk-blokkli-item-icon {
  width: 1em;
  height: 1em;
  svg {
    @apply w-full h-full fill-current;
  }
}

.bk-owner-indicator {
  @apply fixed bottom-0 right-0 bg-red-light z-messages p-20 text-red-normal font-medium text-lg flex justify-between items-center;
  left: var(--bk-root-offset-left);
  right: var(--bk-root-offset-right);
}

.bk-qr-code {
  canvas {
    @apply !w-full !h-auto aspect-square;
  }

  p {
    @apply my-20;
  }
}

[data-element-type='existing'] {
  @apply select-none cursor-default;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  * {
    @apply select-none cursor-default;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
  }

  &:hover {
    @apply outline-mono-500/90 outline-2 outline-dashed;
  }
}

.bk .bk-blokkli-item-label {
  @apply flex items-center text-mono-700 text-left;
  > div {
    @apply shrink-0;
  }
  span {
    @apply text-sm truncate min-w-0;
  }
}

.bk-parent:hover .bk-blokkli-item-label,
.bk-blokkli-item-label:hover {
  .bk-blokkli-item-label-icon {
    @apply bg-mono-200 text-mono-900 border-mono-400;
  }
}

.bk-blokkli-item-label-icon {
  @apply w-25 h-25 border rounded bg-mono-100 flex items-center justify-center text-mono-500 mr-[7px] relative z-20 border-mono-300;
}

.bk-scrollbar-dark {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    @apply bg-mono-700;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-mono-500 border-mono-900 border-3;
    border-radius: 20px;
  }
}

.bk-scrollbar-light {
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    @apply bg-mono-300;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-mono-400 border-mono-900 border-3;
    border-radius: 20px;
  }
}

.bk-overlay {
  @apply bg-mono-800/90 backdrop-blur-md;
  html.bk-low-performance-mode & {
    @apply backdrop-filter-none bg-mono-800/95;
  }
}

.bk-touch-action-bar {
  @apply fixed bottom-0 left-0 w-full z-touch-action-bar bg-mono-900 h-50 pointer-events-auto;

  button {
    @apply w-full  h-full min-h-0 !rounded-none;
  }
}

.bk-lead {
  @apply text-xl text-mono-600;
}

html.bk-html-root:not(.bk-use-animations) {
  *,
  *:before,
  *:after {
    transition: none !important;
  }
}

.bk-selectable {
  @apply outline outline-1 outline-accent-700;
  &.bk-is-active {
    @apply ring-accent-400/30 ring-[7px];
    outline-width: 2px;
  }
}

.bk-input-range {
  @apply block w-full;
  input {
    @apply w-full block accent-accent-700 bg-mono-100 rounded-full border border-mono-300;
  }

  span {
    @apply font-medium mb-5 inline-block;
  }
}

[data-blokkli-editable-field] {
  @apply pointer-events-auto;
}

html.bk-isolate-provider {
  [data-provider-uuid]:not([data-blokkli-provider-active='true']) {
    @apply !hidden;
  }
}

.bk-form-select {
  @apply relative;
  > div {
    @apply absolute top-0 h-full flex items-center pl-20 font-medium;
  }

  select {
    @apply px-20 cursor-pointer font-medium bg-white;
  }
}

html.bk-hide-non-editable {
  .bk-main-canvas {
    > * {
      @apply invisible;
    }

    .bk-selection,
    [data-field-name],
    [data-blokkli-editable-field] {
      @apply visible;
    }
  }
}

.bk {
  @apply text-base;
  strong,
  label,
  button {
    transition: none;
    min-inline-size: initial;
    margin: 0;
  }
  strong {
    color: inherit;
    gap: 0;
  }
  label {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    gap: 0;
  }
  button {
    @apply text-white text-left items-start justify-start;
    block-size: initial;
    border-radius: 0;
    box-shadow: none !important;
    gap: 0;
    &:hover {
      box-shadow: none !important;
    }
    &:after {
      display: none;
    }
  }
}

.bk-list-item {
  @apply !rounded-none;
  &:after {
    @apply !hidden;
  }
}

.bk-body {
  touch-action: none;
  @apply select-none;

  svg {
    @apply select-none;
  }

  [data-bk-is-muted='true'] {
    @apply opacity-30;
  }
}

#bk-banner-container {
  @apply fixed z-translations-banner-mobile lg:z-translations-banner-desktop grid;
  left: var(--bk-root-offset-left);
  bottom: var(--bk-root-offset-bottom);
  right: var(--bk-root-offset-right);
}

.bk-state-unavailable {
  @apply bg-red-normal p-20 text-white;

  h2 {
    @apply text-2xl font-bold;
  }

  p {
    @apply text-lg;
  }
}

.bk {
  .bk-beta-indicator {
    @apply bg-accent-700 text-white text-xs uppercase rounded-full font-semibold px-[7px] py-[1px];
  }
}
