@import "../settings/variables";

.breadcrumbs {
  align-items: center;
  color: $breadcrumbs-text-color;
  display: flex;
  font-size: 14px;
  letter-spacing: 0.25px;
  line-height: 20px;

  a,
  a:hover {
    text-decoration: none;
  }

  &__crumb {
    color: $breadcrumbs-crumb-text-color;
    text-decoration: none;

    &:hover {
      color: $breadcrumbs-crumb-hover-color;
      cursor: pointer;
      text-decoration: underline;
    }

    &#{&}--active {
      color: $breadcrumbs-crumb-active-color;
      font-weight: bold;
      text-decoration: none;

      &:hover {
        cursor: default;
      }
    }
  }

  &__separator {
    margin: 0px 8px;
  }
}