$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);
$on-white-fill-hover: var(
  --wds-breadcrumbs-on-white-fill-hover,
  var(--wds-color-black-600)
);
$on-grey-fill-hover: var(
  --wds-breadcrumbs-on-grey-fill-hover,
  var(--wds-color-black-600)
);
$on-dark-fill-hover: var(
  --wds-breadcrumbs-on-dark-fill-hover,
  var(--wds-color-black-300)
);
$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-300)
);
$padding-medium: var(
  --wds-breadcrumbs-padding-horizontal-medium,
  var(--wds-space-200)
);
$padding-small: var(
  --wds-breadcrumbs-padding-horizontal-small,
  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-font-line-height-200)
);
$divider-margin: var(
  --wds-breadcrumbs-divider-margin-horizontal,
  var(--wds-space-0)
);

.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;
    padding: 0 $padding-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;
  }
}