_bootstrap.scss

// Override bootstrap variables
$spacer: 1rem;
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1400px,
);
$grid-breakpoints: (
  xs: 0,
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
);
$dropdown-link-hover-bg: var(--pst-color-surface);

// --pst-color-surface can also be assigned to the dark variant because it is
// scoped to different values depending on light/dark theme
$dropdown-dark-link-hover-bg: var(--pst-color-surface);
$dropdown-link-active-bg: var(--pst-color-surface);
$dropdown-dark-link-active-bg: var(--pst-color-surface);
$focus-ring-width: 0.1875rem; // 3px at 100% zoom (0.1875 * 16px base font = 3px)
$focus-ring-opacity: 1;
$focus-ring-color: var(--pst-color-accent);
$focus-ring-blur: 0;
$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color;

// For many elements, we do not use `outline-offset`. For some we set the offset
// equal to the focus ring width (either outwards or inwards). But for some
// other elements (e.g., collapsible admonitions) we set it to this value.
$focus-ring-offset: 0.125rem; // 2px at 100% zoom (0.125 * 16px base font = 2px)

// outline creates the same style of focus ring, it just uses CSS outline instead of box shadow
$focus-ring-outline: $focus-ring-color solid $focus-ring-width;
$btn-focus-box-shadow: $focus-ring-box-shadow;