// ============================================================================
// :: Breadcrumbs
// ============================================================================
/**
 * List component that is used to display the breadcrumbs of a page.
 */

// ============================================================================
// :: Root
// ============================================================================
.bp-breadcrumbs {
  position: relative;

  display: inline-flex;
  justify-content: flex-start;
  align-items: center;
  padding: 4rem 0;

  list-style-type: none;
}

// ============================================================================
// :: Elements
// ============================================================================
.bp-breadcrumbs__item {
  position: relative;

  padding-right: 1rem;
  margin-right: 0.6rem;

  &:not(:last-child) {

    &::after {
      content: "/";

      position: absolute;
      top: 50%;
      right: 0;
      transform: translateY(-50%);

      color: $bp-text-color-dark;
    }
  }
}

.bp-breadcrumbs__item-link {
  position: relative;

  padding-bottom: 0.4rem;

  font-size: $bp-font-size-2x-small;
  font-weight: $bp-font-weight-bold;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1rem;

  color: $bp-text-color-base;

  transition: color 0.15s ease-in-out;

  &::after {
    content: "";

    position: absolute;
    bottom: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background-color: $bp-primary-color;

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.3s ease-in-out;
  }

  &:hover {
    color: $bp-text-color-dark;

    &::after {
      transform: scaleX(1);
    }
  }
}

// ============================================================================
// :: States
// ============================================================================
.bp-breadcrumbs__item {

  &.is-active {

    .bp-breadcrumbs__item-link {
      color: $bp-text-color-dark;

      &::after {
        transform: scaleX(1);
      }
    }
  }
}