@import '../styles/_colors';

.vui-breadcrumbs{
  display:inline-flex;
  margin:0;
  padding:12px 0;
  list-style:none;
  align-items:center;

  > li{
    display: flex;
    flex: 1 1 auto;
    align-items: center;

    *:first-child{
      text-decoration:none;
      color:base-color(neutral-60);
      background: transparent;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
      font-weight: inherit;
      border: 0;
      padding: 0;
      cursor: pointer;
      &:hover{
        text-decoration:underline;
      }
    }

    > svg{
      margin:0 12px;
    }

    &.vui-breadcrumbs-firstchevron{
      svg{
        margin-left: 0;
      }
    }

    &[data-highlight="true"]{
      font-weight: bold;
    }
  }
}