/* Breakpoints */
@value small-mobile-breakpoint-size: 320;
@value small-mobile-breakpoint-query: (min-width: calc(small-mobile-breakpoint-size * 1px));
@value small-mobile-breakpoint-max-query: (max-width: calc( (small-mobile-breakpoint-size - 1) * 1px ));

@value mobile-breakpoint-size: 420;
@value mobile-breakpoint-query: (min-width: calc(mobile-breakpoint-size * 1px));
@value mobile-breakpoint-max-query: (max-width: calc( (mobile-breakpoint-size - 1) * 1px ));

@value small-tablet-breakpoint-size: 580;
@value small-tablet-breakpoint-query: (min-width: calc(small-tablet-breakpoint-size * 1px));
@value small-tablet-breakpoint-max-query: (max-width: calc( (small-tablet-breakpoint-size - 1) * 1px));

@value medium-tablet-breakpoint-size: 768;
@value medium-tablet-breakpoint-query: (min-width: calc(medium-tablet-breakpoint-size * 1px));
@value medium-tablet-breakpoint-max-query: (max-width: calc( (medium-tablet-breakpoint-size - 1) * 1px ));

@value large-tablet-breakpoint-size: 1024;
@value large-tablet-breakpoint-query: (min-width: calc(large-tablet-breakpoint-size * 1px));
@value large-tablet-breakpoint-max-query: (max-width: calc( (large-tablet-breakpoint-size - 1) * 1px ));

@value desktop-breakpoint-size: 1280;
@value desktop-breakpoint-query: (min-width: calc(desktop-breakpoint-size * 1px));
@value desktop-breakpoint-max-query: (max-width: calc( (desktop-breakpoint-size - 1) * 1px ));

@value large-desktop-breakpoint-size: 1400;
@value large-desktop-breakpoint-query: (min-width: calc(large-desktop-breakpoint-size * 1px));
@value large-desktop-breakpoint-max-query: (max-width: calc( (large-desktop-breakpoint-size - 1) * 1px ));

html {
  /* Sizing */
  --body-horizontal-padding: 30px;
  --body-padding-top: 50px;
  --cumulative-desktop-body-padding: calc(
    var(--total-nav-height) +
    var(--body-padding-top)
  );
  --doc-card-3-per-row: 243px;
  --doc-card-4-per-row: 177px;
  --doc-padding-top: 30px;
  --doc-padding-right: 28px;
  --doc-padding-bottom: 40px;
  --doc-padding-left: 28px;
  --header-size: 32px;
  --h1-size: var(--ifm-h1-font-size);
  --h2-size: var(--ifm-h2-font-size);
  --h3-size: var(--ifm-h3-font-size);
  --ifm-code-font-size: 85% !important;
  --right-sidebar-width: 0px;
  /* Global Colors */
  --accent-highlight: var(--brand-color);
  --blue-1: #6889E5;
  --brand-color: #42318c;
  --color-contrast: white;
  --dark-mode-black-lighter: #3C4357;
  --dark-mode-black-darker: #131313;
  --dark-mode-black-darkest: #191F36;
  --doc-secondary-color: black; /*black for legibility, otherwise var(--gray-6);*/
  --gray-1: #969CA5;
  --gray-2: #A3ACB9;
  --gray-3: #A9A9A9;
  --gray-4: #7F8FA4;
  --gray-5: #737387; /* passes AA for small text on white background  */
  --gray-6: #354052;
  --light-gray-1: #BFC7D2;
  --dark-mode-white-ghost: #FAFAFA;
  --default-background-color: white;
  --default-border-color: #E5E5E5;
  --doc-component-background: white;
  --ifm-background-surface-color: var(--default-background-color);
  --ifm-color-primary: var(--brand-color) !important;
  --nav-height-mobile: 60px;
  --primary-gray: #757575;
  /* Component specific colors */
  --snippet-border-color: #EDEDED;
  --snippet-border-radius: 8px;
  --snippet-copy-url: url('../img/shared/copy.svg');
  --snippet-header-background: #E3E8EE;
  --scrollbar-width: 10px; /* TODO: Look into accounting varying browser widths of scrollbar */
  /* z-index */
  --z-just-above: 1;
  /* ifm presets */
  --ifm-font-weight-light: 300 !important;
  --ifm-font-weight-normal: 400 !important;
  --ifm-font-weight-bold: 500 !important;
  --ifm-h1-font-size: var(--header-size) !important;
  --ifm-h2-font-size: 22px !important;
  --ifm-h3-font-size: 18px !important;
  /* Misc */
  --default-hover-opacity: .7;
  --font-bold: NB International Pro Bold, NB International Pro, Helvetica;
  --font-normal: NB International Pro, Helvetica;
}

html[data-theme='dark'] {
  /* Global Colors */
  --accent-highlight: white;
  --color-contrast: black;
  --default-background-color: var(--dark-mode-black-darkest);
  --default-border-color: var(--dark-mode-black-lighter);
  --doc-component-background: var(--dark-mode-black-lighter);
  --doc-secondary-color: var(--gray-2);
  --primary-gray: var(--gray-2);
  /* Component specific colors */
  --ifm-link-hover-color: white;
  --ifm-link-color: var(--blue-1);
  --ifm-tabs-color-active: white;
  --ifm-tabs-color: var(--primary-gray);
  --snippet-border-color: var(--dark-mode-black-lighter);
  --snippet-copy-color: white;
  --snippet-copy-url: url('../img/shared/copy-dark.svg');
  --snippet-header-background: #50576B;
}

@media small-tablet-breakpoint-query {
  html {
    --header-size: 40px;
  }
}

@media large-tablet-breakpoint-max-query {
  :global(.desktop-only) {
    display: none !important;
  }
}

@media large-tablet-breakpoint-query {
  html {
    --right-sidebar-width: 252px;
  }

  :global(.mobile-only) {
    display: none !important;
  }
}


@media desktop-breakpoint-query {
  html {
    --doc-padding-top: 30px;
    --doc-padding-right: 38px;
    --doc-padding-left: 38px;
  }
}

@media large-desktop-breakpoint-query {
  html {
    --doc-padding-top: 52px;
    --doc-padding-right: 62px;
    --doc-padding-left: 62px;
  }
}
