.breadcrumbs-container {
  @include font-small;
  align-items: center;
  display: flex;
  flex-wrap: wrap;

  .delimiter {
    @include font-button;
    color: $color-silver-chalice;
    font-weight: bold;
    padding: 0 .5em;
  }

  .breadcrumbs-link {
    display: inline-block;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:hover {
      text-decoration: none;
    }
  }

  .breadcrumbs-collapsed-container {
    color: $brand-primary;
    position: relative;

    .show-breadcrumbs {
      align-items: center;
      cursor: pointer;
      display: flex;
      position: relative;
    }

    a {
      @include font-button;
      color: $brand-primary;
    }
  }
}