/* cspell:ignore zindex */
:root {
  /* Global background color */
  --db-background-color: var(--sl-color-neutral-0);
  --db-text-color: var(--sl-color-neutral-900);

  /* Placeholders */
  --db-background-image: repeating-linear-gradient(45deg, oklch(100% 0 0), oklch(100% 0 0) 13px, var(--sl-color-neutral-100) 13px, var(--sl-color-neutral-100) 14px);
  --db-background-size: 40px 40px;

  /* Table if for panel logs, could have it's own file at some point */
  --db-table-bg: var(--sl-color-neutral-50);
  --db-table-border: var(--sl-color-neutral-200);
  --db-table-header-bg: var(--sl-color-neutral-100);
  --db-table-header-color: var(--sl-color-neutral-900);
  --db-table-row-hover: var(--sl-color-neutral-200);

  /* Shoelace override */
  --sl-tooltip-arrow-size: 0;
  /* Design tokens mapping between Shoelace and Navigation */
  --sl-font-sans: var(--admin-toolbar-font-family);

  /* Opacity when htmx load. */
  --db-loading-opacity: 0.7;
  --db-z-index: 501;
  /* Try to be hover everything */
  --db-z-index-fullscreen: 1251;
  /* With Admin toolbar. */
  &:has(.toolbar-horizontal) {
    --db-z-index: 401;
  }
}

/* Dark mode overrides using .sl-theme-dark class */
.display-builder.sl-theme-dark {
  --db-background-color: var(--sl-color-neutral-0);
  --db-text-color: var(--sl-color-neutral-900);
  --db-background-image: repeating-linear-gradient(45deg, oklch(20% 0 0), oklch(20% 0 0) 13px, var(--sl-color-neutral-50) 13px, var(--sl-color-neutral-50) 14px);
  --db-table-bg: var(--sl-color-neutral-50);
  --db-table-border: var(--sl-color-neutral-200);
  --db-table-header-bg: var(--sl-color-neutral-100);
  --db-table-header-color: var(--sl-color-neutral-900);
  --db-table-row-hover: var(--sl-color-neutral-200);
}

/* Table styling uses variables, so it switches automatically */
.db-island-logs table {
  width: 100%;
  border: 1px solid var(--db-table-border);
  border-collapse: collapse;
  background: var(--db-table-bg);
}

.db-island-logs th,
.db-island-logs td {
  padding: 0.5rem;
  border: 1px solid var(--db-table-border);
}

.db-island-logs th {
  color: var(--db-table-header-color);
  background: var(--db-table-header-bg);
  font-weight: bold;
}

.db-island-logs tr {
  background: var(--db-table-bg);
}

.db-island-logs tr:hover {
  background: var(--db-table-row-hover);
}

body:has(.display-builder) .dialog-off-canvas-main-canvas {
  margin-inline-start: var(--drupal-displace-offset-left, 0);
}

/* Fullscreen button toggle @see components/fullscreen_button. */
.display-builder {
  z-index: var(--db-z-index);
  color: var(--db-text-color);
}
.display-builder.display-builder--fullscreen {
  position: fixed;
  z-index: var(--db-z-index-fullscreen);
  top: 0;
  left: 0;
  overflow: auto;
  width: 100%;
  height: 100%;
  background-color: var(--db-background-color);
}

/* Available tokens modal on fullscreen */
.display-builder-is-fullscreen .modal {
  --bs-modal-zindex: calc(var(--db-z-index-fullscreen) + 3);
  --bs-backdrop-zindex: calc(var(--db-z-index-fullscreen) + 2);
}

/* Drupal dialog (token browser, etc.) on fullscreen */
.display-builder-is-fullscreen .ui-widget-overlay {
  z-index: calc(var(--db-z-index-fullscreen) + 2) !important;
}

.display-builder-is-fullscreen .ui-dialog {
  z-index: calc(var(--db-z-index-fullscreen) + 3) !important;
}

body:has(.db-htmx-before-request):has(.display-builder--fullscreen) {
  > * {
    opacity: var(--db-loading-opacity);
  }
}

body:has(.db-htmx-before-request):not(.display-builder--fullscreen) {
  .display-builder > * {
    opacity: var(--db-loading-opacity);
  }
}

.display-builder {
  /* Avoid clipping before the web components are attached, without hiding
  the declarative shadow dom of db-isolate */
  :not(db-isolate, :defined) {
    visibility: hidden;
  }

  /* Lighter global focus. */
  *:focus {
    outline: 2px solid transparent !important;
    box-shadow: none !important;
  }

  /* Disable the builder until htmx is done. */
  /* @see assets/js/display_builder.js */
  &.db-htmx-before-request {
    pointer-events: none;
  }

  .db-background,
  .db-background::part(panel),
  .db-background.shoelace-button::part(base) {
    box-shadow: var(--sl-shadow-large);
  }

  /* When on a viewport switch context. */
  &.viewport-active {
    .display-builder__main {
      box-shadow: rgb(27, 31, 35, 0.15) 0 10px 25px 0;
    }
    /* Viewport switch menu active state */
    .switch-viewport {
      .viewport-menu .active::part(label) {
        font-weight: bold;
      }
    }
  }

  .display-builder__main {
    max-width: 100%;
    margin: 1rem auto 0;
    transition: margin-left 0.1s ease;
    transition: max-width 0.3s ease;

    .db-message {
      margin: 1rem;
      &::part(base) {
        z-index: calc(var(--db-z-index) + 3);
      }
    }
  }
  &.display-builder--fullscreen {
    .display-builder__main .db-message::part(base) {
      z-index: calc(var(--db-z-index-fullscreen) + 3);
    }
  }

  .shoelace-tabs__tab[tabindex]:focus {
    outline: 0 none;
    box-shadow: unset;
  }

  /* Keyboard shortcut */
  .db-toolbar code {
    color: var(--sl-color-danger-400);
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
  }

  /* Preview Island specific */
  .db-preview-placeholder {
    margin: 0.2rem 0 0.2rem 0;
    padding: 1rem;
    color: var(--db-text-color);
    border-radius: 0.25rem;
    outline: 2px dotted var(--sl-color-neutral-400);
    background-image: var(--db-background-image);
    background-size: var(--db-background-size);
    box-shadow: var(--sl-shadow-large);
    font-style: italic;
  }

  .db-preview-placeholder-md {
    min-height: 10rem;
  }

  .db-preview-placeholder-lg {
    min-height: 20rem;
  }

  .db-node-contextual-open:not([data-slot-id]) {
    border-radius: 0.2rem !important;
    outline: 0.25rem dotted var(--sl-color-purple-700) !important;
    outline-offset: 2px !important;
  }
}

.db-menu {
  display: none;
}
