@adobe/spectrum-css/dist/components/breadcrumb/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-Breadcrumbs {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: start;
      justify-content: start;
  list-style-type: none;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  -ms-flex-positive: 1;
      flex-grow: 1;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -ms-flex-preferred-size: 0%;
      flex-basis: 0%;

  margin: 0;
  padding: 0;
}

[dir="rtl"] .spectrum-Breadcrumbs-itemSeparator { transform: matrix(-1, 0, 0, 1, 0, 0) scale(1); }

.spectrum-Breadcrumbs-itemSeparator {
  position: relative;
  top: var(--spectrum-global-dimension-size-10);

  opacity: 1;
}

.spectrum-Breadcrumbs-item {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: start;
      justify-content: start;

  box-sizing: border-box;
  height: var(--spectrum-breadcrumb-list-height, var(--spectrum-global-dimension-size-400));

  position: relative;

  white-space: nowrap;
  font-size: var(--spectrum-breadcrumb-item-text-size, var(--spectrum-global-dimension-font-size-200));
  font-weight: var(--spectrum-breadcrumb-item-text-font-weight, var(--spectrum-alias-body-text-font-weight));
  line-height: var(--spectrum-breadcrumb-item-text-line-height, var(--spectrum-alias-body-text-line-height));
}

.spectrum-Breadcrumbs-item:last-of-type {
    font-weight: var(--spectrum-breadcrumb-title-text-font-weight, var(--spectrum-alias-body-text-font-weight-strong));
  }

.spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemSeparator {
      display: none;
    }

[dir="ltr"] .spectrum-Breadcrumbs-item > .spectrum-ActionButton {
    margin-right: var(--spectrum-breadcrumb-button-gap, var(--spectrum-global-dimension-static-size-10));
}

[dir="rtl"] .spectrum-Breadcrumbs-item > .spectrum-ActionButton {
    margin-left: var(--spectrum-breadcrumb-button-gap, var(--spectrum-global-dimension-static-size-10));
}

[dir="ltr"] .spectrum-Breadcrumbs-itemLink {

  margin-right: var(--spectrum-breadcrumb-item-margin-right, var(--spectrum-global-dimension-static-size-10));
}

[dir="rtl"] .spectrum-Breadcrumbs-itemLink {

  margin-left: var(--spectrum-breadcrumb-item-margin-right, var(--spectrum-global-dimension-static-size-10));
}

.spectrum-Breadcrumbs-itemLink {
  cursor: default;
  position: relative;

  display: -ms-inline-flexbox;

  display: inline-flex;
  -ms-flex-align: center;
      align-items: center;
  -ms-flex-pack: start;
      justify-content: start;

  padding-top: 0;

  padding-bottom: 0;
  padding-left: var(--spectrum-breadcrumb-item-padding-x, var(--spectrum-global-dimension-size-100));
  padding-right: var(--spectrum-breadcrumb-item-padding-x, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-breadcrumb-list-height, var(--spectrum-global-dimension-size-400));

  border-radius: var(--spectrum-breadcrumb-item-border-radius, var(--spectrum-alias-border-radius-regular));

  outline: none;

  text-decoration: none;
}

.spectrum-Breadcrumbs-itemLink[href],
  .spectrum-Breadcrumbs-itemLink[tabindex="0"] {
    cursor: pointer;
  }

.spectrum-Breadcrumbs-itemLink[href]:hover,
    .spectrum-Breadcrumbs-itemLink[href].focus-ring,
    .spectrum-Breadcrumbs-itemLink[tabindex="0"]:hover,
    .spectrum-Breadcrumbs-itemLink[tabindex="0"].focus-ring {
      text-decoration: underline;
    }

[dir="ltr"] .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,[dir="ltr"] 
.spectrum-Breadcrumbs-itemLink.focus-ring:before {
  left: 0;
}

[dir="rtl"] .spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,[dir="rtl"] 
.spectrum-Breadcrumbs-itemLink.focus-ring:before {
  right: 0;
}

.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,
.spectrum-Breadcrumbs-itemLink.focus-ring:before {
  position: absolute;
  top: 0;

  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 100%;

  border-width: var(--spectrum-breadcrumb-item-border-size-key-focus, var(--spectrum-alias-border-size-thick));
  border-style: solid;
  border-radius: var(--spectrum-breadcrumb-item-border-radius, var(--spectrum-alias-border-radius-regular));

  content: "";
  pointer-events: none;
}

.spectrum-Breadcrumbs--compact .spectrum-Breadcrumbs-item {
    font-size: var(--spectrum-breadcrumb-compact-item-text-size, var(--spectrum-global-dimension-font-size-100));
  }

.spectrum-Breadcrumbs--multiline {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item {
    font-size: var(--spectrum-breadcrumb-multiline-item-text-size, var(--spectrum-global-dimension-font-size-75));
    font-weight: var(--spectrum-breadcrumb-multiline-item-text-font-weight, var(--spectrum-alias-body-text-font-weight));
    line-height: var(--spectrum-breadcrumb-multiline-item-text-line-height, var(--spectrum-alias-body-text-line-height));
  }

.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type {
      height: auto;

      width: 100%;

      margin-top: var(--spectrum-breadcrumb-multiline-title-margin-top, var(--spectrum-global-dimension-static-size-0));

      font-size: var(--spectrum-breadcrumb-multiline-title-text-size, var(--spectrum-global-dimension-font-size-300));
      font-weight: var(--spectrum-breadcrumb-multiline-title-text-font-weight, var(--spectrum-alias-body-text-font-weight-strong));
      line-height: var(--spectrum-breadcrumb-multiline-title-text-line-height, var(--spectrum-alias-heading-text-line-height));
    }

.spectrum-Breadcrumbs--multiline .spectrum-Breadcrumbs-item:last-of-type .spectrum-Breadcrumbs-itemLink {
        height: auto;

        text-decoration: none;
      }

.spectrum-Breadcrumbs-item {
  color: var(--spectrum-breadcrumb-item-text-color, var(--spectrum-alias-label-text-color));
}

.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink {
      color: var(--spectrum-breadcrumb-item-text-color-drop, var(--spectrum-alias-text-color-hover));
      background-color: var(--spectrum-breadcrumb-item-background-color-drop, var(--spectrum-alias-highlight-selected));
    }

.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before {
        border-color: var(--spectrum-breadcrumb-item-border-color-drop, var(--spectrum-global-color-blue-500));
      }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemSeparator {
    color: var(--spectrum-breadcrumb-separator-icon-color, var(--spectrum-alias-icon-color));
  }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink {
    color: inherit;
  }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink:hover {
      color: var(--spectrum-breadcrumb-item-text-color-hover, var(--spectrum-alias-text-color-hover));
    }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink.focus-ring {
      color: var(--spectrum-breadcrumb-item-text-color-key-focus, var(--spectrum-alias-text-color-hover));
    }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink.focus-ring:before {
        border-color: var(--spectrum-breadcrumb-item-border-color-key-focus, var(--spectrum-alias-border-color-focus));
      }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink:active {
      color: var(--spectrum-breadcrumb-item-text-color-down, var(--spectrum-alias-text-color-down));
      border-bottom: 0;
    }

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink.is-disabled {
      color: var(--spectrum-breadcrumb-item-text-color-disabled, var(--spectrum-alias-text-color-disabled));
    }

.spectrum-Breadcrumbs-item.is-selected,
  .spectrum-Breadcrumbs-item:last-of-type {
    color: var(--spectrum-breadcrumb-item-text-color-down, var(--spectrum-alias-text-color-down));
  }

.spectrum-Breadcrumbs-item.is-selected ~ .spectrum-Breadcrumb:last-of-type {
        color: var(--spectrum-breadcrumb-item-text-color, var(--spectrum-alias-label-text-color));
      }

.spectrum-Breadcrumbs-item.is-selected .spectrum-Breadcrumbs-itemLink.focus-ring {
        color: var(--spectrum-breadcrumb-item-text-color-down, var(--spectrum-alias-text-color-down));
        border-bottom: 0;
      }