/* ==========================================================================
   Config
   ========================================================================== */
$breadcrumb-inactive-color: $neutral-base !default;
$breadcrumb-font-size: $typo-size-large !default;
$breadcrumb-font-weight: $typo-weight-semi-bold !default;
$breadcrumb-line-height: $typo-line-height-lead !default;
$breadcrumb-active-color: $neutral-dark !default;
$breadcrumb-spacing: $layout-spacing-base !default;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-breadcrumb {
  font-size: $breadcrumb-font-size;
  font-weight: $breadcrumb-font-weight;
  line-height: $breadcrumb-line-height;
  margin-bottom: $breadcrumb-spacing;

  .gui-dropdown-gc {
    color: $breadcrumb-active-color;

    @include default-font-styles;

    .gui-dropdown__action {
      @include text-overflow-ellipsis;

      text-decoration: none;
      max-width: 250px;
    }
  }

  .gui-dropdown__trigger {
    color: $breadcrumb-inactive-color;
    font-size: $breadcrumb-font-size;
    font-weight: $breadcrumb-font-weight;

    @include link-hover-underline;

    &.gui-is-active {
      text-decoration: underline;
    }
  }
}

.gui-breadcrumb,
.gui-breadcrumb__item,
.gui-breadcrumb__item > * {
  display: flex;
  align-items: center;
}

.gui-breadcrumb .gui-text-overflow-ellipsis {
  display: block;
}

.gui-breadcrumb a {
  @include link-hover-underline;

  color: inherit;
}

.gui-breadcrumb__item {
  color: $breadcrumb-inactive-color;

  @include respond-to(small) {
    display: none;
  }

  &::after {
    content: '/';
    margin: 0 $breadcrumb-spacing*0.25;
  }

  &:last-child {
    color: $breadcrumb-active-color;

    @include respond-to(small) {
      display: block;
    }

    &::after {
      content: '';
    }
  }
}