$on-white-fill-hover: var(
  --wds-breadcrumbs-on-white-fill-hover,
  var(--wds-color-black-700)
) !default;
$on-grey-fill-hover: var(
  --wds-breadcrumbs-on-grey-fill-hover,
  var(--wds-color-white)
) !default;
$on-dark-fill-hover: var(
  --wds-breadcrumbs-on-dark-fill-hover,
  var(--wds-color-white-transparent-30)
) !default;
$border-radius: var(
  --wds-breadcrumbs-border-radius,
  var(--wds-border-radius-300)
);
$text-color: var(--wds-color-text-standard-primary);
$text-color-light: var(--wds-color-text-standard-primary-light);
$height-large: var(--wds-breadcrumbs-height-large, var(--wds-space-800));
$height-medium: var(--wds-breadcrumbs-height-medium, 26px);
$height-small: var(--wds-breadcrumbs-height-small, var(--wds-space-600));
$padding-large: var(
  --wds-breadcrumbs-padding-horizontal-large,
  var(--wds-space-400)
);
$padding-medium: var(
  --wds-breadcrumbs-padding-horizontal-medium,
  var(--wds-space-200)
);
$font-size-small: var(
  --wds-breadcrumbs-font-size-small,
  var(--wds-font-size-200)
);
$line-height-small: var(
  --wds-breadcrumbs-text-line-height-small,
  var(--wds-space-400)
);
$divider-margin: var(
  --wds-breadcrumbs-divider-margin-horizontal,
  var(--wds-space-0)
);
$text-weight-selected: var(
  --wds-breadcrumbs-text-weight-selected,
  var(--wds-font-weight-bold)
);

.breadcrumbs {
  &--size-large &__item {
    height: $height-large;
    padding: 0 $padding-large;
  }

  &--size-medium &__item {
    height: $height-medium;
    padding: 0 $padding-medium;
  }

  &--size-small &__item {
    height: $height-small;
  }

  &#{&}--size-small &__item &__item-text {
    font-size: $font-size-small;
    line-height: $line-height-small;
  }

  @media (hover: hover) {
    &--skin-on-white-background
      &__item:not(#{&}__item--active):not(#{&}__item--disabled):hover {
      border-radius: $border-radius;
      color: $text-color;
      background-color: $on-white-fill-hover;
    }

    &--skin-on-gray-background
      &__item:not(#{&}__item--active):not(#{&}__item--disabled):hover {
      border-radius: $border-radius;
      color: $text-color;
      background-color: $on-grey-fill-hover;
    }

    &--skin-on-dark-background
      &__item:not(#{&}__item--active):not(#{&}__item--disabled):hover {
      border-radius: $border-radius;
      color: $text-color-light;
      background-color: $on-dark-fill-hover;
    }
  }

  &__divider {
    margin: 0 $divider-margin;
  }

  &__item#{&}__item--button#{&}__item--active &__item-text {
    font-weight: $text-weight-selected;
  }
}