/* hide just the powered by scalar link */
.scalar-premium-promo {
  display: none !important;
}
a[href="https://www.scalar.com"] {
  display: none !important;
}

/* basic theme */
.light-mode {
  --scalar-background-1: #ffffff; /* pWhite.DEFAULT */
  --scalar-background-2: #f3f4f6; /* pLightGray.DEFAULT */
  --scalar-background-3: #dadbdd; /* pLightGray.500 */
  --scalar-background-accent: #234e1a1f; /* pPrimary.DEFAULT @ 12% */

  --scalar-color-1: #303030; /* pDarkGray.DEFAULT */
  --scalar-color-2: #595959; /* pDarkGray.light */
  --scalar-color-3: #aaaaac; /* pLightGray.700 */

  --scalar-color-accent: #234e1a; /* pPrimary.DEFAULT */
  --scalar-border-color: #dadbdd; /* pLightGray.500 */
}

.dark-mode {
  --scalar-background-1: #262626; /* pDarkGray.600 */
  --scalar-background-2: #212121; /* pDarkGray.700 */
  --scalar-background-3: #1c1c1c; /* pDarkGray.800 */

  --scalar-color-1: #f3f4f6; /* pLightGray.DEFAULT */
  --scalar-color-2: #c2c3c4; /* pLightGray.dark */
  --scalar-color-3: #797a7b; /* pLightGray.900 */

  --scalar-color-accent: #4e7147; /* pPrimary.light (pPrimary.300) */
  --scalar-background-accent: #4e71471f; /* pPrimary.light @ 12% */

  --scalar-border-color: #363636; /* pDarkGray.350 */
}

/* Document Sidebar */
.light-mode .t-doc__sidebar,
.dark-mode .t-doc__sidebar {
  --scalar-sidebar-background-1: var(--scalar-background-1);
  --scalar-sidebar-color-1: var(--scalar-color-1);
  --scalar-sidebar-color-2: var(--scalar-color-2);
  --scalar-sidebar-border-color: var(--scalar-border-color);

  --scalar-sidebar-item-hover-background: var(--scalar-background-2);
  --scalar-sidebar-item-hover-color: currentColor;

  --scalar-sidebar-item-active-background: var(--scalar-background-2);
  --scalar-sidebar-color-active: var(--scalar-color-1);

  --scalar-sidebar-indent-border: var(--scalar-sidebar-border-color);
  --scalar-sidebar-indent-border-hover: var(--scalar-sidebar-border-color);
  --scalar-sidebar-indent-border-active: var(--scalar-sidebar-border-color);

  --scalar-sidebar-search-background: transparent;
  --scalar-sidebar-search-color: var(--scalar-color-3);
  --scalar-sidebar-search-border-color: var(--scalar-border-color);
}

/* advanced */
.light-mode {
  --scalar-color-green: #7b9475; /* pGreen.200 */
  --scalar-color-red: #e76b49; /* pRed.DEFAULT */
  --scalar-color-yellow: #f9bc93; /* pOrange.200 */
  --scalar-color-blue: #2fa66e; /* pSecondary.300 */
  --scalar-color-orange: #f5904b; /* pOrange.DEFAULT */
  --scalar-color-purple: #f7b2b2; /* pPink.DEFAULT */

  --scalar-button-1: #234e1a; /* pPrimary.DEFAULT */
  --scalar-button-1-hover: #1c3e14; /* pPrimary.dark */
  --scalar-button-1-color: #ffffff; /* pWhite.DEFAULT */

  /* danger & alert backgrounds use default mixing rules */
  --scalar-color-danger: color-mix(
    in srgb,
    var(--scalar-color-red),
    var(--scalar-color-1) 20%
  );
  --scalar-background-alert: color-mix(
    in srgb,
    var(--scalar-color-orange),
    var(--scalar-background-1) 95%
  );
  --scalar-background-danger: color-mix(
    in srgb,
    var(--scalar-color-red),
    var(--scalar-background-1) 95%
  );
}

.dark-mode {
  --scalar-color-green: #7b9475; /* pGreen.200 */
  --scalar-color-red: #cf6041; /* pRed.500 */
  --scalar-color-yellow: #f5904b; /* pOrange.DEFAULT */
  --scalar-color-blue: #2fa66e; /* pSecondary.300 */
  --scalar-color-orange: #f5904b; /* pOrange.DEFAULT */
  --scalar-color-purple: #dea0a0; /* pPink.500 */

  --scalar-button-1: #ffffff; /* pWhite.DEFAULT */
  --scalar-button-1-hover: #f3f4f6; /* pLightGray.DEFAULT */
  --scalar-button-1-color: #303030; /* pDarkGray.DEFAULT */

  /* danger & alert backgrounds use default mixing rules */
  --scalar-color-danger: color-mix(
    in srgb,
    var(--scalar-color-red),
    var(--scalar-color-1) 20%
  );
  --scalar-background-alert: color-mix(
    in srgb,
    var(--scalar-color-orange),
    var(--scalar-background-1) 95%
  );
  --scalar-background-danger: color-mix(
    in srgb,
    var(--scalar-color-red),
    var(--scalar-background-1) 95%
  );
}

/* document header */
.light-mode .t-doc__header,
.dark-mode .t-doc__header {
  --scalar-header-background-1: var(--scalar-background-1);
  --scalar-header-border-color: var(--scalar-border-color);
  --scalar-header-color-1: var(--scalar-color-1);
  --scalar-header-color-2: var(--scalar-color-2);
  --scalar-header-background-toggle: var(--scalar-color-3);
  --scalar-header-call-to-action-color: var(--scalar-color-accent);
}