/*******************************
 * 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 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;
  font-size: /* grow(15, 16) */ clamp(0.9375rem, 0.9152131783rem + 0.0968992248vw, 1rem);
  font-weight: 700;
  line-height: 1.35;
}
.breadcrumb ol li:not(:first-child)::before {
  --icon-width: 7;
  --icon-height: 11;
  --icon-size: 0.5rem;
  --actual-icon-size: var(--icon-size, 0.625rem);
  content: "";
  color: var(--primary-color);
  margin: 0.1rem /* grow(6, 12) */ clamp(0.375rem, 0.2412790698rem + 0.5813953488vw, 0.75rem) 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(/wp-content/themes/rattin.ch/dist/f85032330edf4127.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 6px;
  margin: -4px -6px;
}
.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:active {
  color: var(--primary-color);
}
@media (hover: hover) and (pointer: fine) {
  .breadcrumb ol li a:hover {
    color: var(--primary-color);
  }
  .breadcrumb ol li a:active {
    color: var(--primary-color-darker);
  }
}
.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: /* grow(8, 24) */ clamp(0.5rem, 0.1434108527rem + 1.5503875969vw, 1.5rem);
}