// // General Settings // =====================================

// This helps balance spacing around inline-block elements $breadcrumb-context: “Breadcrumb”; $gap-inline-spacer: -0.25em; $icon-vertical-spacer: -0.2em;

$breadcrumb-gap: 1.5; $breadcrumb-icon-height: 2.5ex; $breadcrumb-icon-display-height: 2ex; $breadcrumb-icon-spacing: 0px;

$icon-breadcrumb-separator: (

"name": "usa-icons/navigate_next",
"svg-height": 40,
"svg-width": 40,
"height": $breadcrumb-icon-display-height,
"color": $theme-breadcrumb-separator-color,

);

$icon-breadcrumb-back: (

"name": "usa-icons/arrow_back",
"svg-height": 40,
"svg-width": 40,
"height": $breadcrumb-icon-display-height,
"color": $theme-breadcrumb-separator-color,

);

// Set default value for custom mixin exdent-icon() $breadcrumb-back-icon-aspect: (

map-get($icon-breadcrumb-back, "svg-width"),
map-get($icon-breadcrumb-back, "svg-height")

);

// Defines spacing so back icon is optically placed @mixin exdent-icon($dim: $breadcrumb-back-icon-aspect) {

$aspect: nth($dim, 1) / nth($dim, 2);
$icon-width: $breadcrumb-icon-display-height * $aspect;
padding-left: calc(#{$icon-width} + #{$breadcrumb-icon-spacing});
text-indent: calc((#{$icon-width} + #{$breadcrumb-icon-spacing}) * -1);

}

.usa-breadcrumb {

@include typeset(
  $theme-breadcrumb-font-family,
  $theme-breadcrumb-font-size,
  3
);
@include set-text-and-bg(
  $theme-breadcrumb-background-color,
  $context: $breadcrumb-context
);
@include u-padding-x($theme-breadcrumb-padding-x);

@include at-media($theme-breadcrumb-min-width) {
  @include u-padding-bottom($theme-breadcrumb-padding-bottom);
  @include u-padding-top($theme-breadcrumb-padding-top);
}

&:not(.usa-breadcrumb--wrap) {
  .usa-breadcrumb__list {
    @include at-media($theme-breadcrumb-min-width) {
      @include u-white-space("no-wrap");
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
}

}

.usa-breadcrumb__list {

@include unstyled-list;
@include u-display("block");
@include u-padding($theme-focus-width);
margin: units($theme-focus-width) * -1;

}

.usa-breadcrumb__list-item {

@include sr-only;
@include u-display("inline");
@include u-white-space("no-wrap");

@include at-media-max($theme-breadcrumb-min-width) {
  @include u-white-space("wrap");

  // If parent link only (mobile), only show parent of current link
  &:nth-last-child(2) {
    @include not-sr-only;

    .usa-breadcrumb__link {
      @include button-unstyled;
      @include exdent-icon;
      @include place-icon(
        $icon-breadcrumb-back,
        "before",
        0,
        baseline,
        $theme-breadcrumb-background-color
      );

      // Override link colors from button-unstyled()
      @include set-link-from-bg(
        $theme-breadcrumb-background-color,
        $theme-breadcrumb-link-color,
        $context: $breadcrumb-context
      );

      @include u-display("inline-block");
      @include u-padding-bottom($theme-breadcrumb-padding-bottom);
      @include u-padding-top($theme-breadcrumb-padding-top);

      &:before {
        bottom: $icon-vertical-spacer;
        // Magic number to center icon
        height: $breadcrumb-icon-display-height;
        position: relative;
      }

      // Prevent underline that extends beyond text
      &,
      &:hover,
      &:active {
        @include u-text("no-underline");
      }
      span {
        @include u-text("underline");
      }
    }

    // Override icon spacing from place-icon() with non-token value
    .usa-breadcrumb__link::before {
      margin-right: $breadcrumb-icon-spacing;
    }
  }
}

@include at-media($theme-breadcrumb-min-width) {
  @include not-sr-only;

  // Breadcrumb separator ›
  &:not(:last-child) {
    @include place-icon(
      $icon-breadcrumb-separator,
      "after",
      0,
      baseline,
      $theme-breadcrumb-background-color
    );
  }

  // Style overrides for separator using non-token values
  &:not(:last-child)::after {
    // Magic number to center icon
    bottom: $icon-vertical-spacer;
    margin-left: $breadcrumb-icon-spacing;
    margin-right: $breadcrumb-icon-spacing;
    height: $breadcrumb-icon-display-height;
    position: relative;
  }
}

}

.usa-breadcrumb__link {

@include set-link-from-bg(
  $theme-breadcrumb-background-color,
  $theme-breadcrumb-link-color,
  $context: $breadcrumb-context
);
@include u-display("inline");

// Prevent underline that extends beyond text
@include u-text("no-underline");

span {
  @include u-text("underline");
}

}

// ——————————— // Variations // ———————————

// Breadcrumb wrap .usa-breadcrumb–wrap {

@include at-media($theme-breadcrumb-min-width) {
  @include u-line-height($theme-breadcrumb-font-family, 4);
}

.usa-breadcrumb__list-item {
  @include u-display("inline-block");
}

}