@import '../../globals/scss/vars';
@import '../../globals/scss/colors';
@import '../../globals/scss/mixins';
@import '../../globals/scss/typography';
@import '../../globals/scss/spacing';
@import '../../globals/scss/import-once';
@import '../../globals/scss/css--typography';
@import '../link/link';

@include exports('breadcrumb') {
  .#{$prefix}--breadcrumb {
    @include typescale('zeta');
    @include font-family;
    display: none;

    @include breakpoint(bp--xs--major) {
      display: flex;
      flex-wrap: wrap;
    }
  }

  .#{$prefix}--breadcrumb-item {
    margin-right: $spacing-md;
    display: flex;
    align-items: center;
  }

  .#{$prefix}--breadcrumb-item::after {
    content: '/';
    margin-left: $spacing-md;
    color: $text-03;
  }

  .#{$prefix}--breadcrumb--no-trailing-slash .#{$prefix}--breadcrumb-item:last-child::after {
    content: '';
  }

  .#{$prefix}--breadcrumb-item:last-child {
    margin-right: 0;

    &::after {
      margin-right: 0;
    }
  }

  .#{$prefix}--breadcrumb .#{$prefix}--link {
    white-space: nowrap;
    font-weight: 400;
    text-decoration: none;
    border-bottom: 1px solid transparent;

    &:hover,
    &:focus {
      outline: none;
      color: $brand-01;
      border-bottom: 1px solid $brand-01;
    }

    // Applies to Firefox only
    @-moz-document url-prefix() {
      & {
        border-bottom: none;
      }
    }
  }
}