.breadcrumbs {
  padding-block: var(--space-20);
}

.breadcrumbs-list {
  display: flex;
  align-items: center;
  overflow-x: auto;
  margin-inline: calc(var(--gutter) * -1);
  position: relative;

  &::-webkit-scrollbar {
    display: none;
  }

  &::before,
  &::after {
    content: '';
    flex-shrink: 0;
    flex-basis: var(--gutter);
  }

  .breadcrumbs-item {
    display: flex;
    align-items: center;

    span {
      white-space: nowrap;
    }
  }

  .breadcrumbs-item a {
    display: block;
    flex-shrink: 0;
    text-decoration: none;
    inline-size: calc(100% / var(--columns));
    padding-block: var(--space-12);
    position: relative;

    &:not(.breadcrumbs-item--current) {
      position: relative;
      color: var(--scheme-text-tertiary);
      transition: color var(--transition);

      &::after {
        content: '';
        position: absolute;
        inset-block-start: calc(45% + 1em);
        inset-inline-start: calc(50% - var(--space-12) * -1);
        transform: translateX(-50%) translateY(var(--space-6));
        inline-size: calc(100% - calc(var(--space-12) * 2));
        block-size: var(--space-1);
        background-color: var(--scheme-text);
        opacity: 0;
        transition:
          opacity var(--transition),
          transform var(--transition);
      }

      &:hover,
      &:focus-visible {
        color: var(--scheme-text);
      }

      &:hover::after,
      &:focus-visible::after {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      &:first-child::after {
        inset-inline-start: 50%;
        inline-size: 100%;
      }
    }
  }

  .breadcrumbs-item + .breadcrumbs-item::before {
    content: '/';
    display: block;
    padding-inline: var(--space-8);
    color: var(--scheme-text-tertiary);
  }
}