<commit_before>/* Variables */

$arrow-width: 36px;

$active-border-height: 4px;
$active-triangle-height: 12px;


.phase-nav{
  position: relative;
  padding-right: $arrow-width !important;
  padding-left: $arrow-width !important;
}

.phase-nav__wrapper{
  display: flex;
  overflow-y: scroll;
  padding-bottom: $active-triangle-height + $active-border-height;
  margin-bottom: -($active-triangle-height + $active-border-height);
  &.owl-carousel{
    overflow-y: hidden;
  }
}

.phase-nav__item{
  background: rgba($dark-gray, .9);
  color: $white;
  border-right: 1px solid rgba($white, .1);
  min-height: 100%;
  padding: 1rem 1.5rem .75rem .75rem;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 250px;
  display: flex;
  align-items: center;
  position: relative;
  .owl-wrapper &{
    background: none;
  }

  &:hover{
    color: $primary;
  }
  &.is-active{
    &:hover{
      color: $white;
    }
    &:before,
    &:after{
      content: "";
      display: block;
      position: absolute;
    }
    &:before{
      left: 0;
      bottom: 0;
      width: 100%;
      height: $active-border-height;
      background-color: $primary;
    }
    &:after{
      left: 50%;
      left: calc(50% - $active-border-height);
      bottom: -$active-triangle-height;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: $active-triangle-height solid $primary;
    }
  }
}

.phase-nav__number{
  background-color: rgba($white, .9);
  color: $dark-gray;
  border-radius: 50%;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  margin-top: -3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .is-inactive & {
    background-color: darken($muted, 20);
  }
  .is-active &{
    background-color: $primary;
    color: $white;
  }
}

.phase-nav__info{
  padding-left: .5em;
  flex-grow: 1;
}

.phase-nav__title{
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  .is-inactive & {
    color: $muted;
  }
}

.phase-nav__date{
  color: $muted;
  font-weight: 600;
  font-size: 90%;
}

.next,
.prev{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  background: rgba($dark-gray, .9);
  height: 100%;
  width: $arrow-width;
  border-radius: 0;
  border-right: 1px solid rgba($white, .1);
  .icon{
    fill: $white;
    width: 14px;
    height: 14px;
    margin: 0 auto;
  }
  &:hover{
    .icon{
      fill: $primary;
    }
  }
}

.next{
  left: auto;
  right: 1px;
  border-right: 0;
  border-left: 1px solid rgba($white, .1);
  width: $arrow-width;
}

/* Carousel styles*/

.js .next,
.js .prev{
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-wrapper{
  display: flex !important;
}<commit_msg>phase nav - arrow alignment inconsistency fix between browsers<commit_after>/* Variables */

$arrow-width: 36px;

$active-border-height: 4px;
$active-triangle-height: 12px;


.phase-nav{
  position: relative;
  padding-right: $arrow-width !important;
  padding-left: $arrow-width !important;
}

.phase-nav__wrapper{
  display: flex;
  overflow-y: scroll;
  padding-bottom: $active-triangle-height + $active-border-height;
  margin-bottom: -($active-triangle-height + $active-border-height);
  &.owl-carousel{
    overflow-y: hidden;
  }
}

.phase-nav__item{
  background: rgba($dark-gray, .9);
  color: $white;
  border-right: 1px solid rgba($white, .1);
  min-height: 100%;
  padding: 1rem 1.5rem .75rem .75rem;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 250px;
  display: flex;
  align-items: center;
  position: relative;
  .owl-wrapper &{
    background: none;
  }

  &:hover{
    color: $primary;
  }
  &.is-active{
    &:hover{
      color: $white;
    }
    &:before,
    &:after{
      content: "";
      display: block;
      position: absolute;
    }
    &:before{
      left: 0;
      bottom: 0;
      width: 100%;
      height: $active-border-height;
      background-color: $primary;
    }
    &:after{
      left: 50%;
      left: calc(50% - $active-border-height);
      bottom: -$active-triangle-height;
      width: 0;
      height: 0;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: $active-triangle-height solid $primary;
    }
  }
}

.phase-nav__number{
  background-color: rgba($white, .9);
  color: $dark-gray;
  border-radius: 50%;
  line-height: 1;
  width: 2rem;
  height: 2rem;
  text-align: center;
  font-weight: bold;
  font-size: 1.3rem;
  margin-top: -3px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  .is-inactive & {
    background-color: darken($muted, 20);
  }
  .is-active &{
    background-color: $primary;
    color: $white;
  }
}

.phase-nav__info{
  padding-left: .5em;
  flex-grow: 1;
}

.phase-nav__title{
  display: block;
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1;
  text-transform: uppercase;
  .is-inactive & {
    color: $muted;
  }
}

.phase-nav__date{
  color: $muted;
  font-weight: 600;
  font-size: 90%;
}

.next,
.prev{
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 500;
  background: rgba($dark-gray, .9);
  height: 100%;
  width: $arrow-width;
  border-radius: 0;
  border-right: 1px solid rgba($white, .1);
  .icon{
    fill: $white;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    margin: 0 12px;
  }
  &:hover{
    .icon{
      fill: $primary;
    }
  }
}

.next{
  left: auto;
  right: 1px;
  border-right: 0;
  border-left: 1px solid rgba($white, .1);
  width: $arrow-width;
}

/* Carousel styles*/

.js .next,
.js .prev{
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
}

.owl-wrapper{
  display: flex !important;
}
{'fraction_non_alphanumeric': 0.16061381074168798, 'fraction_numerical': 0.028473998294970163, 'mean_word_length': 2.6916299559471364, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1679008', 'n_tokens_mistral': 2448, 'n_tokens_neox': 2255, 'n_words': 509}