:root {
  --#{$CSS_VAR_PFX}breadcrumbs-txt-color: var(--#{$CSS_VAR_PFX}txt-color);
  --#{$CSS_VAR_PFX}breadcrumbs-bg-color: var(--#{$CSS_VAR_PFX}bg-color);
  --#{$CSS_VAR_PFX}breadcrumbs-border-color: var(--#{$CSS_VAR_PFX}bg-color-darker);
}

.breadcrumbs-wrapper {
  --#{$CSS_VAR_PFX}local-txt-color: var(--#{$CSS_VAR_PFX}breadcrumbs-txt-color);
  --#{$CSS_VAR_PFX}local-bg-color: var(--#{$CSS_VAR_PFX}breadcrumbs-bg-color);
  --#{$CSS_VAR_PFX}local-border-color: var(--#{$CSS_VAR_PFX}breadcrumbs-border-color);
  width: 100%;
  border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
  border-radius: var(--#{$CSS_VAR_PFX}border-radius);
}

.breadcrumbs {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: var(--#{$CSS_VAR_PFX}border-radius);

  &[class*="style-"] {
    background: transparent !important;
  }

  .crumb {
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    display: table-cell;
    padding: 0.64em 1em;
    color: var(--#{$CSS_VAR_PFX}local-txt-color);
    background: var(--#{$CSS_VAR_PFX}local-bg-color);
    border-color: var(--#{$CSS_VAR_PFX}local-border-color);

    &:not(:first-child) {
      padding-inline-start: 3em;

      &:before {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        inset-inline-start: -1.2em;
        display: block;
        width: 2.5em;
        height: 2.5em;
        margin: auto 0;
        background: transparent;
        border: var(--#{$CSS_VAR_PFX}border-width) solid var(--#{$CSS_VAR_PFX}local-border-color);
        border-radius: 0.18em;
        transform: rotate(45deg);
        transition: transform var(--#{$CSS_VAR_PFX}simple-transition);
      }
    }

    &:first-child {
      padding-inline-start: 2em;
    }

    &:last-child {
      padding-inline-end: 2em;
    }

    &:hover,
    &:focus-within {
      &:before {
        transform: rotate(45deg) scale(1.15);
      }
    }
  }
}