@import '../../../../../../styles/vendor/bootstrap_foundation-sites';
@import '../../../../../../styles/object/o-navigation';
@import '../../../../../../styles/object/o-pi-border';

$m-navbar-item__content--max-width: 12rem !default;
$m-navbar-item-height: 2.75rem + (rem_calc($pi-border__size) * 2); // 44px + 3px * 2
$m-navbar-item-height--active: 3.125rem + (rem_calc($pi-border__size) * 2); // 50px + 3px * 2

.m-navbar-item {
  $baseClassName: &;

  display: flex;
  height: $m-navbar-item-height;
  margin-top: 5px;
  margin-left: 2px;
  background-color: #e1f5ff;
  line-height: $m-navbar-item-height;

  &:first-of-type {
    margin-left: 0;
  }

  &--secondary {
    background-color: #f4f4f4;
  }

  &--contrasted {
    background-color: #8dceec;
    color: white;
    &#{$baseClassName}--is-active {
      color: #115972;
    }
  }

  &--is-active {
    position: relative;
    z-index: $l-z-index__active-tab;
    height: $m-navbar-item-height--active;
    margin-top: 0;
    margin-left: 0;
    background-color: white;
    line-height: $m-navbar-item-height--active;

    & + #{$baseClassName} {
      margin-left: 0;
    }
  }

  &__content {
    flex: 1 0;
    max-width: $m-navbar-item__content--max-width;
    padding-right: calc($co-margin / 4);
    padding-left: calc($co-margin / 2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  &__action {
    flex: 0 1;
  }
}
