@import url('/styles/subscribe.css');

.breadcrumb-block-wrapper {
  background-color: var(--secondary-gray-30);
  padding: var(--space-30px) 0 var(--space-15px);
  width: 100%;

  @media (width <= 992px) {
    display: none;
  }

  .breadcrumb-nav {
    .breadcrumbMain {
      display: flex;
      flex-wrap: wrap;
      list-style: none;
      border-radius: 0.25rem;
      background-color: transparent !important;
      padding: 0;
      margin: 0;

      .breadcrumb-item {
        font-size: var(--subscription-font-3-desc);
        line-height: var(--subscription-lh-6-desc-displa);
        position: relative;
        font-weight: var(--fw-500);

        @media (width <= 992px) {
          font-size: var(--heading-font-0-desc);
        }

        a {
          color: var(--neutrals-sub-texts-paragraphs);
          font-weight: var(--fw-500);

          &:hover {
            text-decoration: underline;
          }
        }
      }

      .breadcrumb-item + .breadcrumb-item::before {
        content: '/';
        padding-right: var(--space-5px);
      }

      .breadcrumb-item + .breadcrumb-item {
        padding-left: var(--space-5px);
      }

      li.active {
        font-weight: var(--fw-700);
        color: var(--neutrals-sub-texts-paragraphs);
      }
    }
  }
}

.transparent-background {
  .breadcrumb-block-wrapper {
    background-color: transparent;
  }
}