@import '../../styles/common';

//
// Breadcrumbs
// --------------------------------------------------

.rs-breadcrumb {
  margin-bottom: @line-height-computed;
  font-size: @breadcrumb-font-size;
  color: var(--rs-text-secondary);

  ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  // If breadcrumbs has a ci
  &-item {
    transition: color 0.3s linear;
    display: flex;
    align-items: center;

    &:focus {
      .tab-focus();
    }

    &-active {
      color: var(--rs-breadcrumb-item-active-text);
    }
  }

  // Separator has gap with text
  &-separator {
    margin: 0 @breadcrumb-separator-margin;
  }
}