/*
* Breadcrumb component
*
*/

@import '../../../style/core/utilities.scss';

.dnb-breadcrumb {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  &__bar.dnb-section {
    display: flex;
  }

  &__list.dnb-section {
    display: flex;

    margin: 0;
    padding: 0;

    list-style: none;

    flex-flow: row wrap;
    align-items: center;
    row-gap: 1rem; // For when breaking into new lines (Anchor variant)
    column-gap: 0.5rem;
  }

  &__item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;

    &__span {
      display: flex;
      align-items: center;
      line-height: var(--line-height-basis);

      // To match the other tertiary buttons
      &__icon {
        margin-right: 0.5rem;
      }
    }

    .dnb-anchor {
      line-height: 1.5rem;
      padding: 0;

      // To make the click area bigger
      position: relative;
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: scale(1.25, 2);
        border: 0.5rem solid transparent;
      }
    }

    // Home icon spacing
    &:first-child .dnb-anchor {
      border-left: none;
      .dnb-icon svg {
        margin-right: 0.5rem;
      }
    }
  }

  &__multiple {
    display: flex;
    flex-direction: column;

    transition: height 400ms var(--easing-default);

    @include reducedMotion() {
      transition-duration: 0.01ms;
    }
  }

  &__multiple &__item {
    transition: transform 400ms var(--easing-default)
      calc(var(--delay) * 50ms);
    transform: translateX(-1rem);

    @include reducedMotion() {
      transition-duration: 0.01ms;
    }
  }

  &__multiple.dnb-height-animation--parallax &__item {
    transform: translateX(0);
  }

  /* stylelint-disable no-descending-specificity, no-duplicate-selectors */
  &__multiple &__item {
    html[data-visual-test] & {
      transition: none;
    }
  }
  /* stylelint-enable */

  &--variant-responsive &__bar &__multiple {
    @include allBelow(medium) {
      display: none;
    }
  }

  &--variant-responsive &__toggle {
    @include allAbove(medium) {
      display: none;
    }
  }

  &__collapse {
    display: flex;
    flex-direction: column;
  }

  &__collapse &__list.dnb-section {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0;

    margin: 0.5rem 0;
    margin-left: 1.5rem;
    padding: 0;
  }
}