.breadcrumb {
  padding: 0;
  margin: 0;
  list-style: none;
  background-color: #fff;
  line-height: 1em;
  margin: 10px 0 16px 0;
  display: none;

  @include media-breakpoint-up(sm) {
    display: block;
  }

  font: {
    size: 14px;
    weight: 500;
  }

  li {
    position: relative;
    display: none;

    @include media-breakpoint-up(sm) {
      display: inline-block;
    }

    &:not(:last-child) {
      margin-right: 20px;

      &:after {
        content: ">";
        position: absolute;
        right: -17px;
        line-height: 1;
      }
    }

    a {
      color: #000;
      padding-left: 6px;
      line-height: 1;
    }

    &:first-child {
      a {
        padding-left: 0;
      }
    }

    &:nth-last-of-type(2) {
      display: inline-block;

      &:after {
        display: none;
      }

      @include media-breakpoint-up(sm) {
        &:after {
          display: inline-block;
        }
      }

      a {
        &:before {
          content: "";
          height: 10px;
          width: 35px;
          display: inline-block;
          background-image: url("../../public/images/icons/icon_back.svg");
          background-repeat: no-repeat;
          background-position: bottom center;
        }

        @include media-breakpoint-up(sm) {
          //   padding-left: 6px;
          &:before {
            display: none;
          }
        }
      }
    }
  }

  &-container {
    height: 47px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: $border;

    @include media-breakpoint-up(sm) {
      height: auto;
      border-bottom: none;
    }
  }

  // modifier
  &--white {
    li {
      a {
        color: #fff;
      }
    }
  }

  &--no-indicator {
    li {
      &:not(:last-child) {
        &:after {
          content: "";
        }
      }
    }
  }
}
