$border-radius: var(--wds-breadcrumbs-border-radius, var(--wds-border-radius-full, 100px));
$text-color: var(
  --wds-color-text-standard-primary,
  var(--wsr-color-D30, #595d70)
);
$text-color-light: var(
  --wds-color-text-standard-primary-light,
  var(--wsr-color-D60, #dfe5eb)
);
$on-white-fill-hover: var(
  --wds-breadcrumbs-on-white-fill-hover,
  var(--wds-color-blue-500, var(--wsr-color-B40, #d6e6fe))
);
$on-grey-fill-hover: var(
  --wds-breadcrumbs-on-grey-fill-hover,
  var(--wds-color-white, var(--wsr-color-D80, #ffffff))
);
$on-dark-fill-hover: var(
  --wds-breadcrumbs-on-dark-fill-hover,
  var(
    --wds-color-white-transparent-30,
    var(--wsr-color-D80-10, rgba(255, 255, 255, 0.1))
  )
);
$height-large: var(--wds-breadcrumbs-height-large, 36px);
$height-medium: var(--wds-breadcrumbs-height-medium, 30px);
$height-small: var(--wds-breadcrumbs-height-small, 24px);
$padding-large: var(
  --wds-breadcrumbs-padding-horizontal-large,
  var(--wds-space-250, 14px)
);
$padding-medium: var(
  --wds-breadcrumbs-padding-horizontal-medium,
  var(--wds-space-150, 10px)
);
$padding-small: var(
  --wds-breadcrumbs-padding-horizontal-small,
  var(--wds-space-100, 6px)
);
$font-size-small: var(
  --wds-breadcrumbs-font-size-small,
  var(--wds-font-size-300, 12px)
);
$line-height-small: var(
  --wds-breadcrumbs-text-line-height-small,
  var(--wds-space-300, 16px)
);
$divider-margin: var(--wds-breadcrumbs-divider-margin-horizontal, 8px);
$text-weight-selected: var(
  --wds-breadcrumbs-text-weight-selected,
  var(--wds-font-weight-medium, 530)
);
$on-grey-text-fill-active: var(
  --wds-breadcrumbs-on-grey-text-fill-active,
  var(--wds-color-text-standard-primary, var(--wsr-color-D10, #000624))
);

.breadcrumbs {
  &__item {
    display: inline-flex;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  &__item &__item-text {
    margin: auto 0;
  }

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

  &--size-small &__divider {
    min-height: 24px;
    margin: 0;
    width: 12px;
  }

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

  &--skin-on-dark-background &__item {
    color: var(--wds-color-black-600, var(--wsr-color-D60, #dfe5eb));
  }

  &__item:not(#{&}__item--disabled):not(#{&}__item--active) {
    cursor: pointer;
  }

  &__item--disabled {
    cursor: default;
    pointer-events: none;
  }

  &__item-container {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
  }

  &__divider {
    min-height: 30px;
    margin: 0 $divider-margin;
    color: var(--wds-color-black-500, var(--wsr-color-D50, #acafc4));
  }

  &__item--button {
    background: transparent;
    border: 0;
    padding: 0;
  }

  &__item:focus-visible {
    border-radius: 17px;
  }

  &__item--button:not(#{&}__item--disabled):not(#{&}__item--active) {
    cursor: pointer;
  }

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

  &--skin-on-gray-background
    &__item--button#{&}__item--active
    &__item-text {
    color: $on-grey-text-fill-active;
  }

  &__item--link {
    color: inherit;
    text-decoration: inherit;
  }

  :global([dir='rtl']) &__item-container {
    direction: rtl;
  }

  :global([dir='rtl']) &__item-container &__divider {
    transform: scaleX(-1);
  }
}