@use '../../partials/text';
@use '../../partials/dir';

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

.drawer-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 {
      @extend .cp-txt__ellipsis;
      max-width: 86px;
    }

    & .notification-badge {
      @include dir.side(margin, var(--sp-extra-tight), 0);
    }
  }

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