/*
Copyright 2024 New Vector Ltd.

SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.breadcrumb {
  display: flex;
  align-items: center;
  block-size: 40px;
  gap: var(--cpd-space-3x);
  padding-block-end: var(--cpd-space-3x);
  border-block-end: 1px solid var(--cpd-color-alpha-gray-400);
  box-sizing: border-box;

  .pages {
    display: flex;
    gap: var(--cpd-space-1x);

    /* override list styles */
    list-style-type: "";
    margin: 0;
    padding: 0;

    a {
      cursor: pointer;
    }

    .last-page {
      font: var(--cpd-font-body-sm-regular);
      color: var(--cpd-color-text-secondary);
    }

    /*
     * Breadcrumb separator
     * We want this separator to be only visual and to not be in the accessibility tree.
     * The nav html element already provides an accessible way to separate the links.
     */
    li + li::before {
      display: inline-block;
      margin: 0 0.3em 0 0.25em;
      transform: rotate(15deg);
      border-inline-end: 1px solid var(--cpd-color-text-secondary);
      block-size: var(--cpd-space-3x);
      content: "";
    }

    /* Last page */
    :last-child {
      span {
        padding-inline-start: var(--cpd-space-1x);
      }
    }
  }
}