/*!**************************************************!*\
  !*** ../src/elements/breadcrumb/breadcrumb.scss ***!
  \**************************************************/
/*******************************
 * 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 {
  --breadcrumb-accent-color: var(--page-color);
}
@container theme style(--theme: dark) {
  .breadcrumb {
    --breadcrumb-accent-color: var(--page-color-400);
  }
}
.breadcrumb:where([data-query-theme="3871037065"]) {
  --breadcrumb-accent-color: var(--page-color-400);
}
.breadcrumb {
  margin-block: var(--element-spacing-md);
  font-size: var(--reduced-font-size);
  letter-spacing: 0;
}
.breadcrumb ol {
  line-height: 1.3;
  list-style: none;
  display: flex;
  align-items: center;
  row-gap: 0.5rem;
  padding: 0;
  margin: 0;
}
.breadcrumb ol:is(body.no-js *) {
  flex-wrap: wrap;
}
.breadcrumb ol li {
  display: flex;
  align-items: center;
}
.breadcrumb ol li:where(body:not(.no-js) *) {
  flex-shrink: 0;
}
.breadcrumb ol li.ellipsis:not(.active) {
  display: none;
}
.breadcrumb ol li.ellipsis .breadcrumb-content-wrapper:has(select:focus-visible) {
  border-radius: var(--rounded);
  outline: 2px solid var(--focus-color, var(--breadcrumb-accent-color));
  outline-offset: var(--focus-offset, 3px);
}
.breadcrumb ol li.ellipsis select {
  appearance: none;
  display: block;
  font-size: 0;
  border: none;
  width: 1rem;
  height: 1.25rem;
  cursor: pointer;
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSIyIiB2aWV3Qm94PSIwIDAgOCAyIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxjaXJjbGUgY3g9IjEiIGN5PSIxIiByPSIxIiBmaWxsPSIjMDAwIi8+PGNpcmNsZSBjeD0iNCIgY3k9IjEiIHI9IjEiIGZpbGw9IiMwMDAiLz48Y2lyY2xlIGN4PSI3IiBjeT0iMSIgcj0iMSIgZmlsbD0iIzAwMCIvPjwvc3ZnPg==);
  mask-size: 0.5rem 0.125rem;
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
  outline: none;
  color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb ol li.ellipsis select:hover {
    color: var(--breadcrumb-accent-color);
  }
}
.breadcrumb ol li.home.small .breadcrumb-content-wrapper {
  padding-left: 0.25rem;
  margin-left: -0.25rem;
  padding-block: 0.5em;
  margin-block: -0.5em;
  border-radius: var(--rounded);
}
.breadcrumb ol li.home.small .breadcrumb-content-wrapper:has(a:focus-visible) {
  outline: 2px solid var(--focus-color, var(--breadcrumb-accent-color));
  outline-offset: var(--focus-offset, 3px);
}
.breadcrumb ol li.home.small a {
  --size: 1rem;
  --padding: 0.25rem;
  font-size: 0;
  display: block;
  box-sizing: content-box;
  width: var(--size);
  height: var(--size);
  padding: var(--padding);
  padding-right: 0;
  margin: 0;
  margin-left: calc(-1 * var(--padding));
  mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDUxMiA1MTIiPjxwYXRoIGQ9Im00OTguMTk1IDIyMi42OTUtLjAzNS0uMDM1TDI4OS4zMDUgMTMuODEzQzI4MC40MDIgNC45MDYgMjY4LjU2NiAwIDI1NS45NzcgMHMtMjQuNDI2IDQuOTAyLTMzLjMzMiAxMy44MDlMMTMuODk4IDIyMi41NXEtLjEwNS4xMDctLjIxLjIxNWMtMTguMjgyIDE4LjM4Ni0xOC4yNSA0OC4yMTguMDkgNjYuNTU4IDguMzc4IDguMzgzIDE5LjQ0NSAxMy4yMzggMzEuMjc3IDEzLjc0NnEuNzIuMDcgMS40NTMuMDdoOC4zMjR2MTUzLjdDNTQuODMyIDQ4Ny4yNTQgNzkuNTc4IDUxMiAxMTAgNTEyaDgxLjcxYzguMjgyIDAgMTUtNi43MTUgMTUtMTVWMzc2LjVjMC0xMy44NzkgMTEuMjktMjUuMTY4IDI1LjE2OS0yNS4xNjhoNDguMTk1YzEzLjg4IDAgMjUuMTY4IDExLjI5IDI1LjE2OCAyNS4xNjhWNDk3YzAgOC4yODUgNi43MTUgMTUgMTUgMTVoODEuNzExYzMwLjQyMiAwIDU1LjE2OC0yNC43NDYgNTUuMTY4LTU1LjE2di0xNTMuN2g3LjcxOWMxMi41ODYgMCAyNC40MjItNC45MDIgMzMuMzMyLTEzLjgwOCAxOC4zNi0xOC4zNzEgMTguMzY3LTQ4LjI1NC4wMjMtNjYuNjM3bTAgMCIvPjwvc3ZnPg==);
  mask-size: var(--size) var(--size);
  mask-repeat: no-repeat;
  mask-position: center;
  background-color: currentColor;
  border-radius: 0;
  outline: none;
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb ol li.home.small a:hover {
    color: var(--breadcrumb-accent-color);
  }
}
.breadcrumb ol li.hidden {
  display: none;
}
.breadcrumb ol li.clip {
  overflow: hidden;
  flex-shrink: 1;
}
.breadcrumb ol li.clip .breadcrumb-content-wrapper {
  max-width: 100%;
  overflow: hidden;
}
.breadcrumb ol li.clip a {
  text-overflow: ellipsis;
  overflow: hidden;
  --focus-offset: calc(-0.25rem - 2px);
}
.breadcrumb ol li:not(:first-child)::before {
  --icon-width: 7;
  --icon-height: 10;
  --icon-size: 0.625rem;
  --actual-icon-size: var(--icon-size, 0.625rem);
  content: "";
  color: inherit;
  flex-shrink: 0;
  margin: 0 1rem;
  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(/wp-content/themes/bexpo.ch/dist/6f8fd050d8402f52.svg));
  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.25rem 0.375rem;
  margin: -0.25rem -0.375rem;
  border-radius: var(--rounded);
}
.breadcrumb ol li a:focus:not(:focus-visible) {
  outline: none;
}
.breadcrumb ol li a:focus-visible {
  outline: 2px solid var(--focus-color, var(--primary-color));
  outline-offset: var(--focus-offset, 3px);
}
.breadcrumb ol li a:not(body.no-js *) {
  white-space: nowrap;
}
.breadcrumb ol li a:is([aria-current=page]) {
  font-weight: 700;
  color: var(--breadcrumb-accent-color);
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb ol li a:hover {
    color: var(--breadcrumb-accent-color);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
  }
}
.breadcrumb:is(section.main > *) {
  margin-top: var(--element-spacing-xl);
  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, [data-h="1"], [data-h="2"], [data-h="3"], [data-h="4"], [data-h="5"], [data-h="6"]) {
  margin-top: 2rem;
}
.breadcrumb:is(.centered-content *) {
  width: 100%;
}
.breadcrumb:is(.centered-content *) ol {
  justify-content: center;
}

/*# sourceMappingURL=css-wpce--breadcrumb.css.map*/