@jetbrains/ring-ui/components/breadcrumb/breadcrumb.scss

@import "../global/global";

// Breadcrumbs
//
// Markup:
// <div class="ring-breadcrumb {$modifiers}">
//   <span>
//      <a class="ring-breadcrumb__element ring-link" href="/groups">Groups</a>
//      <span class="ring-breadcrumb__sep ring-font-icon ring-font-icon_chevron-right"></span>
//   </span>
//   <span class="active ring-breadcrumb__element">
//      <div class="ring-breadcrumb {$modifiers}">
//          <span>
//            <a class="ring-breadcrumb__element ring-link" href="/groups">Admins</a>
//            <span class="ring-breadcrumb__sep ring-font-icon ring-font-icon_chevron-right"></span>
//          </span>
//          <span class="active ring-breadcrumb__element">Admin</span>
//   </span>
// </div>
//
// .ring-breadcrumb_small                    - font-size: 13px

.ring-breadcrumb {
  margin: 20px 0 $ring-unit*3;
  font-size: 0;
}

.ring-breadcrumb_header {
  margin-bottom: 0;
}

.ring-breadcrumb_small {
  .ring-breadcrumb__element {
    display: inline-block;
    height: $ring-unit*2;
    line-height: 14px;
    font-size: var(--ring-font-size);
  }
}

.ring-breadcrumb__element {
  .ring-breadcrumb {
    display: inline;
  }

  display: inline-block;
  height: $ring-unit*3;

  font-size: 24px;
  line-height: 28px;
  text-decoration: none;
}

.ring-breadcrumb__element > span {
  display: inline-block;
}

.ring-breadcrumb__element_active, .ring-breadcrumb .active {
  cursor: default;
}

.ring-breadcrumb__element__description {
  @include ring-ellipsis;

  display: inline-block;
  position: relative;
  top: 2px;
  width: 50 * $ring-unit;
  padding-left: 2 * $ring-unit;

  font-size: var(--ring-font-size);
  line-height: 16px;
}

.ring-breadcrumb__sep {
}

.ring-breadcrumb__sep__icon {
  margin: 0 2px;
  margin-top: -14px;
  color: var(--ring-icon-disabled-color);
}