/*
A simple little SCSS mixin for creating scrim gradients
Inspired by Andreas Larson - https://github.com/larsenwork
https://css-tricks.com/easing-linear-gradients/
*/
/* HIGHTLIGHT GRID STYLE - reusable - for FacetWp */
/* ------------------------------------ *\
  #BREADCRUMB
\* ------------------------------------ */
.opd-breadcrumb {
  --_breadcrumb-padding: var(--breadcrumb-padding, 0.9375rem 0);
  --_breadcrumb-background-color: var(--breadcrumb-background-color, hsl(40deg, 20%, 97%));
  --_breadcrumb-border-width: var(--breadcrumb-border-width, 1px);
  --_breadcrumb-border-color: var(--breadcrumb-border-color, hsl(40deg, 20%, 97%));
  --_breadcrumb-color: var(--breadcrumb-color, hsl(214deg, 13%, 24%));
  --_breadcrumb-font-size: var(--breadcrumb-font-size, 0.75rem);
  padding: var(--_breadcrumb-padding);
  background-color: var(--_breadcrumb-background-color);
  font-size: var(--_breadcrumb-font-size);
  color: var(--_breadcrumb-color);
}
.opd-breadcrumb__item {
  --_breadcrumb-item-font-weight: var(--breadcrumb-item-font-weight, " ");
  --_breadcrumb-item-separator-margin: var(--breadcrumb-item-separator-margin, 0.15em);
  display: inline-block;
  font-weight: var(--_breadcrumb-item-font-weight);
}
.opd-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.opd-breadcrumb a:hover, .opd-breadcrumb a:focus {
  text-decoration: underline;
}
.opd-breadcrumb__item + .opd-breadcrumb__item::before {
  content: "/";
  display: inline-block;
  margin-left: calc(var(--_breadcrumb-item-separator-margin) * 2);
  margin-right: var(--_breadcrumb-item-separator-margin);
}
.opd-breadcrumb .is-current {
  --breadcrumb-item-font-weight: 700;
}

/* ------------------------------------ *\
    #MEDIA-QUERIES
  \* ------------------------------------ */
@media (hover: none) and (pointer: coarse) {
  /* Add padding to increase touch area */
  .opd-breadcrumb__item {
    --breadcrumb-item-separator-margin: 0 0.6em;
  }
  .opd-breadcrumb__item a {
    padding-top: 1em;
    padding-bottom: 1em;
  }
}