// -----------------------------------------------------------------------------
// This file contains all styles related to the breadcrumb component.
// -----------------------------------------------------------------------------

/* Breadcrumb Component */


.breadcrumb {

  &__wrap {
    background-color: #fbfbfb;
    padding: rem(18);
    border-radius: rem(3);
  }
  &__list {
    list-style: none;
    padding: 0;
    margin: 0;
    word-wrap: break-word;
    > li {
      display: inline-block;
      > a {
        color: #a0a0a0;
        font-size: 13px;
        font-weight: 700;
        transition: color 0.5s;
        &:hover {
          color: $g-brand-secondary-color;
        }
      }


      &.is-marked {
        > a {
          color: $g-brand-secondary-color;
        }
      }

      &.has-separator {
        &:after {
          content: '/';
          margin: 0 16px;
        }
      }
    }
  }
}