$border-radius: var(
  --wds-breadcrumbs-border-radius,
  var(--wds-border-radius-100)
);
$text-color: var(--wds-color-text-standard-primary);
$text-color-light: var(--wds-color-text-standard-primary-light);
$on-white-fill-hover: var(
  --wds-breadcrumbs-on-white-fill-hover,
  var(--wds-color-black-700)
);
$on-grey-fill-hover: var(
  --wds-breadcrumbs-on-grey-fill-hover,
  var(--wds-color-white)
);
$on-dark-fill-hover: var(
  --wds-breadcrumbs-on-dark-fill-hover,
  var(--wds-color-white-transparent-30)
);
$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)
);
$text-weight-selected: var(
  --wds-breadcrumbs-text-weight-selected,
  var(--wds-font-weight-bold)
);

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

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

  &#{&}--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;
    }
  }

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