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

The Spectrum CSS top-level backwards compatible package

.spectrum-Breadcrumbs {
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-pack: start;
      justify-content: start;
  list-style-type: none;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;

  margin: 0;
  padding: 0;
}

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

  width: var(--spectrum-breadcrumb-ui-icon-width, var(--spectrum-global-dimension-size-75));
  height: var(--spectrum-breadcrumb-ui-icon-height, var(--spectrum-global-dimension-size-100));

  transform: scale(1);

  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;

  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;
    }

.spectrum-Breadcrumbs-item > .spectrum-ActionButton {
    margin-right: var(--spectrum-breadcrumb-button-gap, 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: 0 var(--spectrum-breadcrumb-item-padding-x, var(--spectrum-global-dimension-size-100));
  height: var(--spectrum-breadcrumb-list-height, var(--spectrum-global-dimension-size-400));

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

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

  outline: none;

  text-decoration: none;
}

.spectrum-Breadcrumbs-itemLink:hover,
  .spectrum-Breadcrumbs-itemLink.focus-ring {
    text-decoration: underline;
  }

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

.spectrum-Breadcrumbs-item.is-dragged .spectrum-Breadcrumbs-itemLink:before,
.spectrum-Breadcrumbs-itemLink.focus-ring:before {
  position: absolute;
  top: 0;
  left: 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 .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--title .spectrum-Breadcrumbs-item:last-of-type {
    width: 100%;

    margin: var(--spectrum-breadcrumb-title-margin, 0.3em 0);

    font-size: var(--spectrum-breadcrumb-title-active-text-size, 28px);
    font-weight: var(--spectrum-breadcrumb-title-active-text-font-weight, 300);
    line-height: var(--spectrum-breadcrumb-title-active-text-line-height, 32px);
  }

.spectrum-Breadcrumbs--title .spectrum-Breadcrumbs-item .spectrum-Heading--pageTitle {
    margin: 0;

    font-size: inherit;
    font-weight: inherit;
  }

.spectrum-Breadcrumbs-item {
  color: var(--spectrum-breadcrumb-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-ui-icon-color, var(--spectrum-global-color-gray-500));
  }

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

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

.spectrum-Breadcrumbs-item .spectrum-Breadcrumbs-itemLink.focus-ring {
      color: var(--spectrum-breadcrumb-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-text-color-down, var(--spectrum-alias-text-color-down));
      border-bottom: 0;
    }

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

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

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