@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.BreadcrumbWrapper {
  li {
    &.ActivePageLink {
      background-color: $primaryColor;
      color: $whiteColor;
      border-radius: 6px;
      margin-right: 0px;
      padding: 4px 8px;
      font-weight: $fw600;
      @media (min-width: $sm) {
        padding: 4px 10px;
      }
      &::after {
        display: none;
      }
    }
    a {
      position: relative;
      color: $grey667Color;
      font-weight: $fw600;
      text-decoration: none;
      display: inline-flex;
      padding: 4px 4px;
      margin-right: 10px;
      transition: 0.2s all;
      @media (min-width: $sm) {
        margin-right: 25px;
      }
      &:first-child {
        padding-left: 0px;
      }
      &:hover {
        color: $primaryColor;
      }
      &::after {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: -18px;
        content: "";
        width: 20px;
        height: 30px;
        display: block;
        mask-size: contain;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        -webkit-mask-repeat: no-repeat;
        transition: all 0.3s ease-in-out;
        mask-position: center;
        background-color: #d0d5dd;
        mask-image: url("../../../public/images/breadcrumb-arrow.svg");
        -webkit-mask-image: url("../../../public/images/breadcrumb-arrow.svg");
        @media (min-width: $sm) {
          right: -26px;
        }
      }
    }
  }
}