.UnderlineNav {

display: flex;
overflow-x: auto;
overflow-y: hidden;
// stylelint-disable-next-line primer/box-shadow
box-shadow: inset 0 -1px 0 var(--color-border-secondary);
justify-content: space-between;

}

.UnderlineNav-body {

display: flex;

}

.UnderlineNav-item {

padding: $spacer-2 $spacer-3;
font-size: $body-font-size;
// stylelint-disable-next-line primer/typography
line-height: 30px;
color: var(--color-underlinenav-text);
text-align: center;
white-space: nowrap;
background-color: transparent;
border: 0;
// stylelint-disable-next-line primer/borders
border-bottom: 2px $border-style transparent;

&:hover,
&:focus {
  color: var(--color-underlinenav-text-hover);
  text-decoration: none;
  border-bottom-color: var(--color-border-tertiary);
  outline: 1px dotted transparent; // Support Firefox custom colors
  outline-offset: -1px;
  transition: border-bottom-color 0.12s ease-out;
}

&.selected,
&[role=tab][aria-selected=true],
&[aria-current]:not([aria-current=false]) {
  font-weight: $font-weight-bold;
  color: var(--color-underlinenav-text-active);
  border-bottom-color: var(--color-underlinenav-border-active);
  outline: 1px dotted transparent; // Support Firefox custom colors
  outline-offset: -1px;

  .UnderlineNav-octicon {
    color: var(--color-text-tertiary);
  }
}

}

.UnderlineNav–right {

justify-content: flex-end;

.UnderlineNav-actions {
  flex: 1 1 auto;
}

}

.UnderlineNav-actions {

align-self: center;

}

.UnderlineNav–full {

display: block;

}

.UnderlineNav-octicon {

margin-right: $spacer-1;
// stylelint-disable-next-line primer/colors
color: var(--color-underlinenav-icon);

}

.UnderlineNav .Counter {

margin-left: $spacer-1;
color: var(--color-underlinenav-counter-text);
background-color: var(--color-underlinenav-counter-bg);

&--primary {
  color: var(--color-counter-primary-text);
  background-color: var(--color-counter-primary-bg);
}

}

.UnderlineNav-container {

display: flex;
justify-content: space-between;

}