/* #region "../src/elements/breadcrumb/breadcrumb.scss" */
/*
- type: css
*/
/*******************************
 * Buttons
 ******************************/
/*
 * Applies the complete set of button styles with all desired style variations.
 * This mixin is normally applied to form buttons or links with
 * the desired button classes eg. .button.style-xxx.
 */
/*
 * Contains styles that all of the buttons have in common.
 * Some button styles might opt out or override some of these styles.
 * One benefit of this approach is that all of the buttons will be consistently
 * configurable with the CSS variables defined below.
 */
/*******************************
 * Button Styles
 *
 * Styles should define the way the buttons look. Depending on the project,
 * you may need to optimize each style based on the section / element that
 * a button is used in. For that purpose you can use the predefined CSS
 * variables to easily overwrite the desired colors based on your need.
 ******************************/
/*******************************
 * Inputs
 ******************************/
.breadcrumb-container {
  margin-inline: calc(-1 * var(--content-margin));
  padding-block: clamp(1rem, 0.8269230769rem + 0.7692307692vw, 1.5rem);
  border-block: 1px solid var(--grey-200);
}

:where(section.main, .background-section) > .breadcrumb-container {
  margin-inline: 0;
}

.breadcrumb-container + .page-section,
.breadcrumb-container + link + .page-section {
  --section-padding-top: var(--reduced-section-padding);
}

.breadcrumb {
  font-size: clamp(0.875rem, 0.8317307692rem + 0.1923076923vw, 1rem);
}
.breadcrumb ol {
  line-height: 1.3;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  row-gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.breadcrumb ol li {
  display: flex;
  align-items: center;
}
.breadcrumb ol li:not(:first-child)::before {
  --icon-width: 6;
  --icon-height: 8;
  --icon-size: 0.5rem;
  --actual-icon-size: var(--icon-size, 0.625rem);
  content: "";
  color: var(--primary);
  margin: 0.1rem clamp(0.625rem, 0.4086538462rem + 0.9615384615vw, 1.25rem) 0;
  width: calc(var(--actual-icon-size) / var(--icon-height) * var(--icon-width));
  height: var(--actual-icon-size);
  background-color: var(--icon-color, currentColor);
  mask-image: var(--icon-image, url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNiIgaGVpZ2h0PSI4IiB2aWV3Qm94PSIwIDAgNiA4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik00Ljg2IDMuNjkgMS4wOC4xM0EuNDguNDggMCAwIDAgLjc1IDBhLjQ4LjQ4IDAgMCAwLS4zMy4xM0wuMTQuMzlhLjQyLjQyIDAgMCAwIDAgLjYyTDMuMzIgNCAuMTQgN2EuNDIuNDIgMCAwIDAgMCAuNjFsLjI3LjI2Yy4xLjA4LjIuMTMuMzMuMTNzLjI1LS4wNS4zMy0uMTNsMy44LTMuNTZhLjQyLjQyIDAgMCAwIDAtLjYyWiIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==));
  mask-size: calc(var(--actual-icon-size) / var(--icon-height) * var(--icon-width)) var(--actual-icon-size);
  mask-repeat: no-repeat;
}
.breadcrumb ol li a {
  display: block;
  color: inherit;
  text-decoration: none;
  pointer-events: all;
  padding: 0 6px;
  margin: -4px -6px;
}
.breadcrumb ol li a:hover {
  color: var(--primary);
}
.breadcrumb ol li a:active {
  color: var(--primary-darker-1);
}
:root.no-focus-visible .breadcrumb ol li a:focus {
  outline: 2px solid var(--focus-color, var(--primary));
  outline-offset: var(--focus-offset, 3px);
}

.breadcrumb ol li a:focus:not(:focus-visible) {
  outline: none;
}
.breadcrumb ol li a:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary));
  outline-offset: var(--focus-offset, 3px);
}
.breadcrumb:is(:is(section.main, .background) > *) {
  margin-top: var(--layout-gap);
  margin-inline: max(var(--content-margin), var(--container-padding));
}
.breadcrumb + :is(h1, h2, h3, h4, h5, h6),
.breadcrumb + :is(.h1, .h2, .h3, .h4, .h5, .h6) {
  margin-top: clamp(0.5rem, 0.1538461538rem + 1.5384615385vw, 1.5rem);
}
/* #endregion "../src/elements/breadcrumb/breadcrumb.scss" */

head{--webpack--css-wpce--breadcrumb:&\.\.\/src\/elements\/breadcrumb\/breadcrumb\.scss;}
/*# sourceMappingURL=css-wpce--breadcrumb.css.map*/