.breadcrumb__wrapper {
  height: var(--header-height);
  position: relative;
}

.breadcrumb {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 var(--sp-extra-tight);

  &::before,
  &::after {
    flex-shrink: 0;
    position: absolute;
    right: 0;
    z-index: 99;

    content: '';
    display: inline-block;
    min-width: 8px;
    width: 8px;
    height: 100%;
    background-image: linear-gradient(
      to right,
      var(--bg-surface-low-transparent),
      var(--bg-surface-low)
    );
  }
  &::before {
    left: 0;
    right: unset;
    background-image: linear-gradient(
      to left,
      var(--bg-surface-low-transparent),
      var(--bg-surface-low)
    );
  }

  & > * {
    flex-shrink: 0;
  }

  & > .btn-surface {
    min-width: 0;
    padding: var(--sp-extra-tight) 10px;
    white-space: nowrap;
    box-shadow: none;
    & p {
      max-width: 86px;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    & .notification-badge {
      margin-left: var(--sp-extra-tight);
      [dir=rtl] & {
        margin-left: 0;
        margin-right: var(--sp-extra-tight);
      }
    }
  }

  &__btn--selected {
    box-shadow: var(--bs-surface-border) !important;
    background-color: var(--bg-surface);
  }
}