@import '../../vendor/carbon-components/scss/components/breadcrumb/breadcrumb';

.#{$prefix}--breadcrumb {
  display: flex;
  flex-wrap: nowrap;
}

.breadcrumb--container {
  &__overflowfull {
    .#{$prefix}--breadcrumb-item {
      min-width: 0;
    }

    .#{$prefix}--breadcrumb-item > * {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}

.breadcrumb--overflow {
  display: flex;
  &:after {
    content: '/';
    margin-left: $spacing-03;
  }
  margin-right: $spacing-03;

  .#{$prefix}--overflow-menu {
    height: auto;
    width: auto;

    & svg {
      fill: $link-01;
      border-bottom: 1px solid transparent;
    }

    &:hover {
      background: none;
    }

    &:hover svg {
      border-color: $link-01;
    }

    &.#{$prefix}--overflow-menu--open {
      background: none;
      box-shadow: none;
    }
  }
}

.breadcrumb--overflow-items {
  &.#{$prefix}--overflow-menu-options--open {
    transform: translate(-45%, 1rem);

    &:focus {
      outline: none;
    }
  }
  &.#{$prefix}--overflow-menu-options::after,
  &.#{$prefix}--overflow-menu-options[data-floating-menu-direction='bottom']::after {
    transform: translate(-50%, -8px);
    background: none;
    left: 50% !important;
    border-left: 0.75rem solid #0000;
    border-right: 0.75rem solid #0000;
    border-bottom: 0.75rem solid #fff;
    width: 0;
    height: 0;
  }

  .#{$prefix}--overflow-menu-options__option:nth-child(even) {
    background-color: $field-02;

    &:hover {
      background-color: $hover-ui;
    }
  }

  .#{$prefix}--overflow-menu-options__btn {
    text-decoration: none;
  }
}

html[dir='rtl'] .breadcrumb--container {
  .#{$prefix}--breadcrumb-item::after,
  .breadcrumb--overflow:after,
  .#{$prefix}--breadcrumb-item:last-child,
  .#{$prefix}--breadcrumb-item:last-child::after {
    margin-left: auto;
    margin-right: $spacing-03;
  }
}