/*!********************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/blocks/post-grid/style.scss ***!
  \********************************************************************************************************************************************************************************************************************************************************/
/**
 * Breakpoints.
 *
 * Sass cannot read the `--breakpoint-*` custom properties out of the Tailwind
 * theme at compile time, so this map mirrors them by hand. Keep the two in step:
 * `src/global/tailwind/design-system.css` is the source of truth, and the names
 * and values here are deliberately identical to it so there is one vocabulary
 * across utilities and SCSS.
 *
 * Values are the breakpoint's *min-width*, matching Tailwind. The mixin
 * subtracts a pixel when it needs a max-width query.
 */
/**
 * Breakpoint query.
 *
 * The map stores each breakpoint's min-width, the same way Tailwind's
 * `--breakpoint-*` variables do, so `$mobileFirst: true` uses the value as-is
 * and the max-width case stops a pixel short of it. That means
 * `breakpoint("sm")` and `breakpoint("sm", true)` never both match a width.
 */
/*********************
* BREAKPOINTS
*
* Names match the Tailwind scale in design-system.css:
* xxs 320, xs 375, sml 479, smlr 568, sm 768, md 992,
* lg 1025, wd 1200, lp 1400, bigLp 1600, xl 1930.
*
* @example
* below the breakpoint (max-width)
* @include breakpoint('sm') {
*	@content;
* }
*
* from the breakpoint up (min-width), matching the `sm:` utility prefix
* @include breakpoint('sm', true) {
*	@content;
*}
*********************/
/**
* Mixin to declare Font-face
*
*/
/**
 * Post Grid. Tailwind lays the grid and the cards out; this only carries the
 * pagination, which core renders as bare anchors and a span, and the select's
 * arrow, which cannot be styled with utilities.
 */
.block-post-grid {
  /**
   * Figma draws every page as a 48px pill: the current one filled with the
   * brand, the rest outlined in the nebula grey with matching text.
   */
}
.block-post-grid__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-nebula);
  border-radius: 40px;
  font-family: var(--font-primary);
  font-size: var(--text-h6);
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-nebula);
  text-decoration: none;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}
.block-post-grid__pagination .page-numbers.dots {
  width: auto;
  min-width: 24px;
  border-color: transparent;
}
.block-post-grid__pagination .page-numbers:hover:not(.dots) {
  border-color: var(--color-bf-brand);
  color: var(--color-bf-brand);
}
.block-post-grid__pagination .page-numbers.current {
  border-color: var(--color-bf-brand);
  background-color: var(--color-bf-brand);
  color: var(--color-bf-white);
}
.block-post-grid {
  /**
   * The results dim while a new order is on its way. Nothing moves and the
   * grid keeps its height, so the page does not jump under the reader.
   */
}
.block-post-grid__results {
  transition: opacity 0.2s ease;
}
.block-post-grid__results[aria-busy=true] {
  opacity: 0.5;
}
.block-post-grid {
  /* The caret sits hard against the right edge of the 296px control. */
}
.block-post-grid__sort select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27%3E%3Cpath d=%27M7 10L12 15L17 10%27 stroke=%27%23000000%27 stroke-opacity=%270.5%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 24px 24px;
  padding-right: 32px;
}

/*# sourceMappingURL=style-index.css.map*/