.progress-widget {
  /* PALETTE */
  --color-dark-stronger-rgb: 0, 0, 0;
  --color-dark-stronger: var(--custom-color-dark-stronger, #000);
  --color-light-stronger: #fff;

  --color-neutral-regular: var(--custom-color-neutral-regular, hsl(0, 0%, 44%));
  --color-neutral-light: var(--custom-color-neutral-light, hsl(0, 0%, 77%));
  --color-neutral-lighter: var(--custom-color-neutral-lighter, hsl(0, 0%, 90%));
  --color-neutral-lightest: var(--custom-color-neutral-lightest, hsl(240, 7%, 97%));

  --color-primary-stronger: var(--custom-color-primary-stronger, hsl(252, 100%, 24%));
  --color-primary-strong: var(--custom-color-primary-strong, hsl(252, 100%, 36%));
  --color-primary-regular: var(--custom-color-primary-regular, hsl(252, 100%, 50%));
  --color-primary-light: var(--custom-color-primary-light, hsl(252, 100%, 73%));
  --color-primary-lighter: var(--custom-color-primary-lighter, hsl(252, 100%, 90%));
  --color-primary-lightest: var(--custom-color-primary-lightest, hsl(252, 100%, 96%));

  --color-secondary-stronger: hsl(49, 100%, 30%);
  --color-secondary-strong: hsl(49, 100%, 40%);
  --color-secondary-regular: hsl(49, 100%, 60%);
  --color-secondary-light: hsl(49, 100%, 80%);
  --color-secondary-lighter: hsl(49, 100%, 90%);
  --color-secondary-lightest: hsl(49, 100%, 95%);

  --color-tertiary-stronger: hsl(2251, 100%, 24%);
  --color-tertiary-strong: hsl(2251, 100%, 40%);
  --color-tertiary-regular: hsl(2251, 100%, 50%);
  --color-tertiary-light: hsl(2251, 100%, 65%);
  --color-tertiary-lighter: hsl(2251, 100%, 92%);
  --color-tertiary-lightest: hsl(2251, 100%, 96%);

  /* SPACING */
  --spacer: 8px; /* 1unit - 8px */

  --rhythm-0_25: calc(var(--spacer) * 0.25); /*   .25 unit -   2px */
  --rhythm-0_5: calc(var(--spacer) * 0.5); /*   .5  unit -   4px */
  --rhythm-1: var(--spacer); /*  1    unit -   8px */
  --rhythm-1_5: calc(var(--spacer) * 1.5); /*  1.5  unit -  12px */
  --rhythm-2: calc(var(--spacer) * 2); /*  2    unit -  16px */
  --rhythm-2_5: calc(var(--spacer) * 2.5); /*  2    unit -  20px */
  --rhythm-3: calc(var(--spacer) * 3); /*  3    unit -  24px */
  --rhythm-4: calc(var(--spacer) * 4); /*  4    unit -  32px */
  --rhythm-5: calc(var(--spacer) * 5); /*  5    unit -  40px */
  --rhythm-6: calc(var(--spacer) * 6); /*  6    unit -  48px */
  --rhythm-7: calc(var(--spacer) * 7); /*  7    unit -  56px */
  --rhythm-8: calc(var(--spacer) * 8); /*  8    unit -  64px */
  --rhythm-9: calc(var(--spacer) * 9); /*  9    unit -  72px */
  --rhythm-10: calc(var(--spacer) * 10); /*  10   unit -  80px */
  --rhythm-12: calc(var(--spacer) * 12); /*  12   unit -  96px */
  --rhythm-14: calc(var(--spacer) * 14); /*  14   unit - 112px */
  --rhythm-16: calc(var(--spacer) * 16); /*  16   unit - 128px */
  --rhythm-20: calc(var(--spacer) * 20); /*  20   unit - 160px */
  --rhythm-22: calc(var(--spacer) * 22); /*  22   unit - 176px */
  --rhythm-24: calc(var(--spacer) * 24); /*  24   unit - 192px */
  --rhythm-27: calc(var(--spacer) * 27); /*  27   unit - 216px */
  --rhythm-28: calc(var(--spacer) * 28); /*  28   unit - 224px */
  --rhythm-32: calc(var(--spacer) * 32); /*  32   unit - 256px */
  --rhythm-36: calc(var(--spacer) * 36); /*  36   unit - 288px */
  --rhythm-39: calc(var(--spacer) * 39); /*  39   unit - 312px */
  --rhythm-40: calc(var(--spacer) * 40); /*  40   unit - 320px */
  --rhythm-46: calc(var(--spacer) * 46); /*  46   unit - 368px */
  --rhythm-48: calc(var(--spacer) * 48); /*  48   unit - 384px */
  --rhythm-53: calc(var(--spacer) * 53); /*  53   unit - 424px */
  --rhythm-56: calc(var(--spacer) * 56); /*  56   unit - 448px */
  --rhythm-64: calc(var(--spacer) * 64); /*  64   unit - 512px */
  --rhythm-75: calc(var(--spacer) * 75); /*  75   unit - 600px */
  --rhythm-80: calc(var(--spacer) * 80); /*  80   unit - 640px */

  /* TYPOGRAPHY */
  --font-size-base: 16px;
  --font-size-medium: 14px;
  --font-size-small: 12px;
  --font-size-xsmall: 10px;
  --font-weight-body: 300;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --nuclia-family: Inter, sans-serif;
  --font-family-body: var(--custom-font-family-body, var(--nuclia-family));
  --font-size-title-m: var(--font-size-base);
  --font-size-title-s: var(--font-size-medium);
  --font-weight-title-m: var(--font-weight-semi-bold);
  --line-height-body-xs: var(--font-size-base);
  --line-height-body-s: calc(var(--font-size-base) * 1.125);
  --line-height-body: calc(var(--font-size-base) * 1.25);
  --line-height-title-m-mobile: calc(var(--font-size-base) * 1.625);
  --line-height-title-m: calc(var(--font-size-base) * 1.75);
  --line-height-title-s: calc(var(--font-size-base) * 1.375);
  --line-height-title-xs: calc(var(--font-size-base) * 1.375);
  --line-height-title-xxs: calc(var(--font-size-base) * 1.375);

  /* TRANSITIONS */
  --duration--superfast: 0.16s;
  --duration--fast: 0.24s;
  --duration--moderate: 0.48s;
  --duration--slow: 0.8s;
  --transition-superfast: var(--duration--superfast) ease-in-out;
  --transition-fast: var(--duration--fast) ease;
  --transition-moderate: var(--duration--moderate) ease;
  --transition-slow: var(--duration--slow) cubic-bezier(0.6, 0, 0.4, 1);

  /* TOKEN */
  --border-radius: var(--rhythm-0_25);

  /* modals */
  --color-backdrop: rgba(var(--color-dark-stronger-rgb), 0.5);
  --default-modal-width: calc(100vw - var(--rhythm-1_5));
  --shadow-modal: 0 var(--rhythm-0_25) var(--rhythm-1) rgba(var(--color-dark-stronger-rgb), 0.2);
  --z-index-modal: 10010;
  --z-index-modal-backdrop: 10000;

  --resource-modal-width: var(--default-modal-width);
  --resource-modal-width-md: 80vw;
  --resource-modal-height: calc(100vh - var(--rhythm-16));
  --resource-modal-height-md: 85vh;

  /* scrollbars */
  --color-scrollbar-track: var(--color-light-stronger);
  --color-scrollbar-thumb: var(--color-dark-stronger);

  --focus-shadow: inset 0 0 0 var(--rhythm-0_25) var(--color-primary-lighter);

  /* Search bar */
  --search-bar-border-color: var(--border-color);
  --search-bar-border-hover-color: var(--border-hover-color);
  --search-bar-border-focus-color: var(--border-focus-color);
  --search-bar-border: 1px solid var(--search-bar-border-color);
  --search-bar-border-hover: 1px solid var(--search-bar-border-hover-color);
  --search-bar-border-focus: 1px solid var(--search-bar-border-focus-color);
  --search-bar-border-radius: var(--border-radius);
  --search-bar-placeholder-color: var(--custom-search-bar-placeholder-color, var(--color-neutral-regular));
  --search-bar-max-width: var(--rhythm-56);

  /* citations */
  --citation-number-background-color: var(--color-primary-lightest);
  --citation-number-background-hover-color: var(--color-primary-lighter);

  /* Viewer */
  --expander-header-height: var(--rhythm-5);
  --player-bar-height: var(--rhythm-5);

  /* Customizable theme */
  --border-color: var(--custom-border-color, var(--color-neutral-light));
  --border-hover-color: var(--custom-border-hover-color, var(--color-neutral-regular));
  --border-focus-color: var(--custom-border-focus-color, var(--color-primary-regular));
  --link-color: var(--custom-link-color, var(--color-primary-regular));
  --text-color: var(--custom-text-color, var(--color-dark-stronger));
  --selected-text-color: var(--custom-selected-text-color, inherit);
  --selected-background-color: var(--custom-selected-background-color, var(--color-primary-lightest));
  --hover-background-color: var(--custom-hover-background-color, var(--color-neutral-lightest));
  --thumbnail-background-color: var(--custom-thumbnail-background-color, var(--color-neutral-lightest));
  --modal-background-color: var(--custom-modal-background-color, var(--color-neutral-lighter));
  --dropdown-background-color: var(--custom-dropdown-background-color, var(--color-light-stronger));
  --container-background-color: var(--custom-container-background-color, var(--color-light-stronger));
  --filter-header-background-color: var(--custom-filter-header-background-color, var(--color-neutral-lightest));
  --filter-header-background-active-color: var(
    --custom-filter-header-background-active-color,
    var(--color-neutral-lighter)
  );

  /* Global style */
  box-sizing: border-box;
  color: var(--text-color);
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-body);
  text-align: left;

  &.dark-mode {
    --border-color: var(--color-neutral-regular);
    --border-hover-color: var(--color-light-stronger);
    --text-color: var(--color-neutral-lightest);
    --search-bar-placeholder-color: var(--color-neutral-light);
    --selected-text-color: var(--color-dark-stronger);
    --hover-background-color: #2b2d30;
    --thumbnail-background-color: #2b2d30;
    --modal-background-color: #303136;
    --dropdown-background-color: #26282b;
    --container-background-color: #1f2023;
    --filter-header-background-color: #2b2d30;
    --filter-header-background-active-color: #303136;
    --citation-number-background-color: #303136;
    --citation-number-background-hover-color: #1f2023;
  }
}

.progress-widget__error {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(220, 38, 38, 0.4);
  background: rgba(254, 226, 226, 0.6);
  color: #991b1b;
  font-size: 0.9rem;
  font-weight: 500;
}

.progress-widget {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--container-background-color, var(--color-light-stronger));
  border-radius: var(--border-radius);
  overflow: hidden;
}

.progress-widget__react-host {
  flex: 1;
  min-height: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: var(--rhythm-6);
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .progress-widget__react-host {
    padding: var(--rhythm-3);
  }
}
