/* ewbootstrap theme overrides for PDF.js viewer.
   Keep this file small and scoped to the viewer only. */

:root {
  /* Current site palette (from Drupal Color-generated CSS). */
  --ew-primary: #222222;
  --ew-secondary: #f5f2eb;
  --ew-light: #ffffff;
  --ew-dark: #603c5f;
  --ew-cta: #e19b6f;

  --ew-border: color-mix(in srgb, var(--ew-dark) 60%, var(--ew-primary));

  /* PDF.js theme variables (override viewer.css defaults). */
  --main-color: var(--ew-primary);
  --body-bg-color: color-mix(in srgb, var(--ew-dark) 40%, var(--ew-primary));
  --progressBar-color: var(--ew-cta);
  --progressBar-bg-color: color-mix(
    in srgb,
    var(--ew-secondary) 70%,
    var(--ew-dark)
  );
  --progressBar-blend-color: color-mix(
    in srgb,
    var(--ew-cta) 55%,
    var(--ew-dark)
  );

  --sidebar-toolbar-bg-color: var(--ew-dark);
  --toolbar-bg-color: var(--ew-dark);
  --toolbar-border-color: color-mix(in srgb, var(--ew-dark) 85%, #000000);
  --toolbar-box-shadow: 0 1px 0 var(--toolbar-border-color);

  /* White icons on dark toolbar. */
  --toolbar-icon-opacity: 0.9;
  --toolbar-icon-bg-color: var(--ew-light);
  --toolbar-icon-hover-bg-color: var(--ew-light);

  /* Hover/toggle states on dark toolbar. */
  --button-hover-color: rgb(255 255 255 / 0.14);
  --toggled-btn-color: var(--ew-light);
  --toggled-btn-bg-color: color-mix(in srgb, var(--ew-cta) 40%, transparent);
  --toggled-hover-active-btn-color: color-mix(
    in srgb,
    var(--ew-cta) 55%,
    transparent
  );

  /* Inputs/dropdowns. */
  --field-color: var(--ew-primary);
  --field-bg-color: var(--ew-light);
  --field-border-color: color-mix(
    in srgb,
    var(--ew-dark) 20%,
    var(--ew-secondary)
  );
  --dropdown-btn-bg-color: color-mix(
    in srgb,
    var(--ew-light) 78%,
    var(--ew-secondary)
  );

  /* Menus/dialogs. */
  --doorhanger-bg-color: var(--ew-light);
  --doorhanger-border-color: rgb(0 0 0 / 0.18);
  --doorhanger-hover-color: var(--ew-dark);
  --doorhanger-separator-color: rgb(0 0 0 / 0.12);

  /* Scrollbars (Firefox uses scrollbar-color; Chromium uses ::-webkit-scrollbar below). */
  --scrollbar-color: color-mix(in srgb, var(--ew-dark) 30%, var(--ew-cta));
  --scrollbar-bg-color: color-mix(
    in srgb,
    var(--ew-dark) 75%,
    var(--ew-primary)
  );
}

/* Rounded container edges inside the iframe. */
html,
body {
  background: transparent;
}

#outerContainer {
  border-radius: 14px;
  overflow: hidden;
  background-color: var(--body-bg-color);
}

#viewerContainer {
  background-color: var(--body-bg-color);
}

/* Slightly round the PDF "page" edges for a softer look. */
.pdfViewer .page {
  border-radius: 10px;
  overflow: hidden;
}

/* Make the top toolbars look like your header bar. */
#toolbarContainer,
#toolbarSidebar {
  background-color: var(--toolbar-bg-color);
  border-bottom: 0;
}

/* num pages */
#numPages {
  color: var(--ew-light);
}

/* views manager */
:is(#viewsManager #viewsManagerHeader) #viewsManagerTitle {
  border-bottom: 1px solid var(--ew-border);
}

/* Sidebar (Views Manager). PDF.js styles it via `.sidebar` + CSS variables, so
   override the variables on the actual element. */
#viewsManager.sidebar {
  --sidebar-bg-color: var(--ew-dark);
  --sidebar-border-color: rgb(255 255 255 / 0.12);
  --sidebar-box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
  --sidebar-backdrop-filter: none;

  --text-color: var(--ew-light);
  --button-fg: var(--ew-light);
  --button-bg: rgb(255 255 255 / 0.08);
  --button-hover-bg: rgb(255 255 255 / 0.14);
  --button-active-bg: rgb(255 255 255 / 0.21);
  --button-border-color: rgb(255 255 255 / 0.1);
  --button-hover-border-color: rgb(255 255 255 / 0.18);
  --button-active-border-color: rgb(255 255 255 / 0.22);
  --button-focus-outline-color: var(--ew-cta);
  --button-focus-border-color: transparent;

  --image-border-color: rgb(255 255 255 / 0.18);
  --image-hover-border-color: rgb(255 255 255 / 0.3);
  --image-page-number-bg: rgb(255 255 255 / 0.1);
  --image-page-number-fg: var(--ew-light);
}

/* Make scrollbars match theme in Chromium/WebKit. */
#viewerContainer::-webkit-scrollbar,
#sidebarContent::-webkit-scrollbar,
#viewsManagerContent::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

#viewerContainer::-webkit-scrollbar-track,
#sidebarContent::-webkit-scrollbar-track,
#viewsManagerContent::-webkit-scrollbar-track {
  background: var(--scrollbar-bg-color);
}

#viewerContainer::-webkit-scrollbar-thumb,
#sidebarContent::-webkit-scrollbar-thumb,
#viewsManagerContent::-webkit-scrollbar-thumb {
  background: var(--scrollbar-color);
  border-radius: 999px;
  border: 3px solid var(--scrollbar-bg-color);
}

#viewerContainer::-webkit-scrollbar-thumb:hover,
#sidebarContent::-webkit-scrollbar-thumb:hover,
#viewsManagerContent::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--scrollbar-color) 80%, var(--ew-cta));
}

/* secondary toolbar */
#secondaryToolbar {
  --toolbar-icon-bg-color: var(--ew-dark);
  --toggled-btn-color: var(--ew-dark);
  --toggled-btn-bg-color: color-mix(in srgb, var(--ew-cta) 40%, transparent);
  --toggled-hover-active-btn-color: color-mix(
    in srgb,
    var(--ew-cta) 55%,
    transparent
  );

  --toolbar-icon-bg-color: var(--ew-dark);
  --toolbar-icon-hover-bg-color: var(--ew-dark);
}