// В этом файле должны быть стили для БЭМ-блока breadcrumbs, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 0;
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  color: #a7a8c7;
  font-size: 12px;
  line-height: 120%;
  letter-spacing: 0.02em;

  @media (min-width: $screen-xl) {
    margin-bottom: 16px;
    font-size: 14px;
  }

  a {
    color: $color-d-blue;
    text-decoration: none;
    @include field-focus;
    border-radius: 4px;
    transition: color $transition-time, outline-color $transition-time;

    &:focus {
      outline-color: $color-cyan;
      color: $color-d-blue;
    }

    &:hover {
      text-decoration: none;
    }

    &:active {
      color: #2ea296;
    }
  }

  &__item {
    display: inline-block;
    margin-right: 0.6em;

    &:not(:last-child):after {
      content: "/";
      display: inline-block;
      margin-left: 0.8em;
    }
  }
}
