Chalarangelo/30-seconds-of-code

nav[aria-label='Breadcrumb'] {
  // Set up a grid layout with standard bleed on either side.
  @include layout-grid-with-bleed;
  // Use a variable to control spacing between individual items and icons, too.
  --breadcrumb_column-gap: var(--spacing-2);

  ol {
    // Place the content in the middle column (no bleed)
    grid-column: 2;
    display: flex;
    color: var(--color-text-light);
    column-gap: var(--breadcrumb_column-gap);
    font-size: var(--font-sm);
    // If all else fails, wrap the breadcrumbs.
    flex-wrap: wrap;
    margin-block-end: var(--spacing-8);

    @media (hover: hover) {
      // Only apply hover styles on devices that support hover.
      &:has(a:is(:hover, :focus)) {
        // Slightly dim non-hovered elements, when one is hovered.
        color: var(--color-text-lighter);
      }
    }
  }

  li {
    // Use flex to inline all items and include the icons, too.
    display: flex;
    column-gap: var(--breadcrumb_column-gap);

    // Hide the current page breadcrumb, but keep it accessible.
    &:has([aria-current='page']) {
      @include visually-hidden;
    }

    // Query depending on how many characters can fit in a line, assuming that
    // the user may change the default font size.
    @media (max-width: 25rem) {
      &:first-child {
        // Visually hide the first breadcrumb (Home) on smaller viewports.
        @include visually-hidden;
      }
    }
  }

  svg {
    // Apply a transition on another item's hover.
    transition: color var(--animation-duration-medium) ease;
  }

  a {
    // Remove underlines from links.
    --link_color-underline: transparent;
    // Apply a transition on hover.
    transition: color var(--animation-duration-medium) ease;

    @media (hover: hover) {
      &:is(:hover, :focus) {
        // Only apply hover styles on devices that support hover.
        color: var(--color-text);
      }
    }
  }
}