<commit_before>/* Based on: http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation */

.breadcrumb {
  /*centering*/
  display: inline-block;
  // box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
  counter-reset: flag;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.breadcrumb li {
  width: 25.46%;
  text-decoration: none;
  outline: none;
  display: inline-block;
  //float: left;
  font-size: 22px;
  line-height: 70px;
  color: $breadcrumb_text_color;
  /*need more margin on the left of links to accomodate the numbers*/
  padding: 0 20px 0 60px;
  background: $breadcrumb_background;
  position: relative;
  height: 70px;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb li:first-child {
  padding-left: 46px;
  border-radius: 5px 0 0 0; /*to match with the parent's radius*/
}

.breadcrumb li:first-child, .breadcrumb li:first-child:after {
  background: $breadcrumb_background_first;
}

.breadcrumb li:first-child:before {
  color: $breadcrumb_background_first;
  left: 50px;
}

.breadcrumb li:nth-child(2), .breadcrumb li:nth-child(2):after {
  background: $breadcrumb_background_second;
}

.breadcrumb li:nth-child(2):before {
  color: $breadcrumb_background_second;
}

.breadcrumb li:last-child {
  border-radius: 0 5px 0 0; /*this was to prevent glitches on hover*/
}

.breadcrumb li:last-child, .breadcrumb li:last-child:after {
  background: $breadcrumb_background_third;
}

.breadcrumb li:last-child:before {
  background: lighten($breadcrumb_background_third, 10);
  color: white; /*this was to prevent glitches on hover*/
}

/*active styles*/
.breadcrumb li.active, .breadcrumb li.active:after {
  background: $breadcrumb_background_active;
}

/*active styles*/
.breadcrumb li.active:before {
  color: $breadcrumb_background_active;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb li:after {
  content: '';
  position: absolute;
  top: 0;
  right: -35px; /*half of square's length*/
  /*same dimension as the line-height of .breadcrumb a */
  width: 70px;
  height: 70px;
  /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
  length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
  if diagonal required = 1; length = 1/1.414 = 0.707*/
  transform: scale(0.707) rotate(45deg);
  /*we need to prevent the arrows from getting buried under the next link*/
  z-index: 1;

  /*stylish arrow design using box shadow*/
  box-shadow: 1px -1px 0 1px rgba(255, 255, 255, 0.9);
  /*
    5px - for rounded arrows and
    50px - to prevent hover glitches on the border created using shadows*/
  border-radius: 0 5px 0 0;
  overflow: hidden;
}
/*we dont need an arrow after the last link*/
.breadcrumb li:last-child:after {
  content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb li:before {
  content: counter(flag);
  counter-increment: flag;
  /*some styles now*/
  border-radius: 100%;
  width: 22px;
  height: 22px;
  line-height: 23px;
  margin: 23px 0;
  position: absolute;
  top: 0;
  left: 75px;
  font-size: 14px;
  color: $body_text_color;
  background: $breadcrumb_background;
}<commit_msg>Remove fancy box-shadow for a cleaner, bug-free rendering of the breadcrumbs/tabs.<commit_after>/* Based on: http://thecodeplayer.com/walkthrough/css3-breadcrumb-navigation */

.breadcrumb {
  /*centering*/
  display: inline-block;
  // box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  border-radius: 5px 5px 0 0;
  /*Lets add the numbers for each link using CSS counters. flag is the name of the counter. to be defined using counter-reset in the parent element of the links*/
  counter-reset: flag;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.breadcrumb li {
  width: 25.46%;
  text-decoration: none;
  outline: none;
  display: inline-block;
  //float: left;
  font-size: 22px;
  line-height: 70px;
  color: $breadcrumb_text_color;
  /*need more margin on the left of links to accomodate the numbers*/
  padding: 0 20px 0 60px;
  background: $breadcrumb_background;
  position: relative;
  height: 70px;
}

/*since the first link does not have a triangle before it we can reduce the left padding to make it look consistent with other links*/
.breadcrumb li:first-child {
  padding-left: 46px;
  border-radius: 5px 0 0 0; /*to match with the parent's radius*/
}

.breadcrumb li:first-child, .breadcrumb li:first-child:after {
  background: $breadcrumb_background_first;
}

.breadcrumb li:first-child:before {
  color: $breadcrumb_background_first;
  left: 50px;
}

.breadcrumb li:nth-child(2), .breadcrumb li:nth-child(2):after {
  background: $breadcrumb_background_second;
}

.breadcrumb li:nth-child(2):before {
  color: $breadcrumb_background_second;
}

.breadcrumb li:last-child {
  border-radius: 0 5px 0 0; /*this was to prevent glitches on hover*/
}

.breadcrumb li:last-child, .breadcrumb li:last-child:after {
  background: $breadcrumb_background_third;
}

.breadcrumb li:last-child:before {
  background: lighten($breadcrumb_background_third, 10);
  color: white; /*this was to prevent glitches on hover*/
}

/*active styles*/
.breadcrumb li.active, .breadcrumb li.active:after {
  background: $breadcrumb_background_active;
}

/*active styles*/
.breadcrumb li.active:before {
  color: $breadcrumb_background_active;
}

/*adding the arrows for the breadcrumbs using rotated pseudo elements*/
.breadcrumb li:after {
  content: '';
  position: absolute;
  top: 0;
  right: -35px; /*half of square's length*/
  /*same dimension as the line-height of .breadcrumb a */
  width: 70px;
  height: 70px;
  /*as you see the rotated square takes a larger height. which makes it tough to position it properly. So we are going to scale it down so that the diagonals become equal to the line-height of the link. We scale it to 70.7% because if square's:
  length = 1; diagonal = (1^2 + 1^2)^0.5 = 1.414 (pythagoras theorem)
  if diagonal required = 1; length = 1/1.414 = 0.707*/
  transform: scale(0.707) rotate(45deg);
  /*we need to prevent the arrows from getting buried under the next link*/
  z-index: 1;

  /*
    5px - for rounded arrows and
    50px - to prevent hover glitches on the border created using shadows*/
  border-radius: 0 5px 0 0;
  overflow: hidden;
}
/*we dont need an arrow after the last link*/
.breadcrumb li:last-child:after {
  content: none;
}
/*we will use the :before element to show numbers*/
.breadcrumb li:before {
  content: counter(flag);
  counter-increment: flag;
  /*some styles now*/
  border-radius: 100%;
  width: 22px;
  height: 22px;
  line-height: 23px;
  margin: 23px 0;
  position: absolute;
  top: 0;
  left: 75px;
  font-size: 14px;
  color: $body_text_color;
  background: $breadcrumb_background;
}
{'fraction_non_alphanumeric': 0.11263888888888889, 'fraction_numerical': 0.03375, 'mean_word_length': 3.8361316319677634, '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': '4108853', 'n_tokens_mistral': 2636, 'n_tokens_neox': 2417, 'n_words': 831}