/* Breadcrumbs */

.breadcrumb {
  width: 100%;
  max-width: 100%;
  font-weight: 400
}

.breadcrumb ul {
  display: flex;
  max-width: 100%;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.breadcrumb li {
  position: relative;
  padding-right: 1.25rem;
  padding-left: 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem
}

.breadcrumb li::before {
  right: 0px;
  content: var(--tw-content);
  background-color: transparent;
  left: unset
}

.breadcrumb li:first-child {
  padding-left: 0px
}

.breadcrumb li:last-child {
  padding-right: 0px
}

.breadcrumb li:last-child::before {
  content: var(--tw-content);
  display: none
}

.breadcrumb li {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

.breadcrumb li a,
.breadcrumb li .qcd {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1)
}

/* Icon before element */

.icon::before {
  position: absolute;
  top: 50%;
  left: 0px;
  z-index: 10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-size: contain;
  background-position: center;
  content: var(--tw-content);
  background-repeat: no-repeat
}

.icon-xs::before {
  height: 0.625rem;
  content: var(--tw-content);
  width: 0.625rem
}

.chevron::before {
  position: absolute;
  top: 50%;
  left: 0px;
  z-index: 10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 0.625rem;
  width: 0.625rem;
  content: var(--tw-content);
  background-image: url('../icons/chevron.svg')
}

.chevron-dark::before {
  position: absolute;
  top: 50%;
  left: 0px;
  z-index: 10;
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 0.625rem;
  width: 0.625rem;
  content: var(--tw-content);
  background-image: url('../icons/chevron_dark.svg')
}