// Name:                       Breadcrumb
//
// Description:                Define style for breadcrumb
//
// Component:                 `.am-breadcrumb`
//
// States:                    `.am-active`
//
// =============================================================================


/* ==========================================================================
   Component: Breadcrumb
 ============================================================================ */

.@{ns}breadcrumb {
  padding: .7em .5em;
  margin-bottom: @line-height-computed;
  list-style: none;
  background-color: @breadcrumb-bg;
  border-radius: @global-radius;
  font-size: @breadcrumb-font-size;

  > li {
    display: inline-block;

    [class*="@{ns}icon-"] {
      &:before {
        color: @breadcrumb-active-color;
        margin-right: 5px;
      }
    }

    + li:before {
      content: "@{breadcrumb-separator}\00a0"; // Unicode space added since inline-block means non-collapsing white-space
      padding: 0 8px;
      color: @breadcrumb-divider-color;
    }
  }

  > .@{ns}active {
    color: @breadcrumb-active-color;
  }
  .hook-breadcrumb;
}

.@{ns}breadcrumb-slash {
  > li + li:before {
    content: "/\00a0";
  }
}


// Hooks
// =============================================================================

.hook-breadcrumb() {}