@import '../common.scss';

@mixin breadcrumbsHover($color, $backgroundColor) {
  .item:not(.active):not(.disabled):hover {
    border-radius: 100px;
    color: $color;
    background-color: $backgroundColor;
  }
}

@mixin breadcrumbs($height, $sidePadding) {
  .item {
    display: inline-block;
    height: $height;
    line-height: $height;
    padding: 0 $sidePadding;
    overflow: hidden;
    white-space: nowrap;
    max-width: 204px;
    text-overflow: ellipsis;
  }

  .item-full-width {
    max-width: initial;
  }
}

.large {
  @include breadcrumbs(36px, 14px);
}

.medium {
  @include breadcrumbs(30px, 10px);
}

.onWhiteBackground {
  @include breadcrumbsHover($D30, $B40);
}

.onGrayBackground {
  @include breadcrumbsHover($D30, $D80);
}

.onDarkBackground {
  @include breadcrumbsHover($D60, transparentize($D80, .9));

  .item {
    color: $D60;
  }
}

.item:not(.disabled):not(.active) {
  cursor: pointer;
}

.disabled {
  cursor: default;
}

.itemContainer {
  display: inline-flex;
  align-items: center;
}

.divider {
  width: 6px;
  min-height: 30px;
  margin: 0 8px;
  color: $D50;
}

.button {
  background: transparent;
  border: 0;
  padding: 0;

  &:focus {
    outline: 0;
  }

  &:not(.disabled):not(.active) {
    cursor: pointer;
  }
}

.link {
  color: inherit;
  text-decoration: inherit;
}

@include withRTL() {
  .breadcrumbs {
    direction: rtl;
  }

  .divider {
    transform: scaleX(-1);
  }
}