<commit_before>@import "../../../../styles/variables.less";
@import "../../../../styles/mixins.less";

@nav-height: 4.9rem;
@progress-height: 0.9rem;
@button-width: 13rem;
@searchbar-margin: 3px;


.footer-nav {
  .media-nav > .media-toolbar > .media-navbar {
    width: 100%;
  }
}

.media-nav {
  &:not(.publishing) {
    background-color: @gray-lightest;
  }

  > .media-toolbar {
    > div,
    > span {
      display: inline-block;
      vertical-align: bottom;
    }

    .toggle.btn {
      background-color: @brand-primary;
      color: white;
      border: solid 2px @brand-primary;
      width: @button-width;
      margin: @searchbar-margin;
      .text {
        margin: 0 6px;
      }
      &.open {
        background-color: white;
        color: @brand-primary;
      }
      &:focus {
        box-shadow: 0 0 3px 2px lightblue;
      }
    }

    .searchbar {
      width: ~"calc(35% - " @button-width * .5 ~")";
      @media (max-width: 640px) {
        width: ~"calc(100% - " @button-width ~"- 3rem)"
      }
      position: relative;
      margin: @searchbar-margin;
      .fa {
        position: absolute;
        left: ~"calc(100% - 27px)";
        top: 0.3em;
        color: @gray-light;
        font-size: 150%;
        &.clear-search {
          cursor: pointer;
        }
      }
    }

    .media-navbar {
      width: ~"calc(65% - " @button-width * .7 ~")";
      @media (max-width: 640px) {
        width: 100%;
        display: block;
      }

      > .book-nav {
        .flexbox();
        .flex-flow(row; nowrap);
        .justify-content(center);
        .user-select(none);

        > .progress, > .back-to-top {
          .flex(1; 1; 75%);
        }

        > .progress {
          margin-top: (@nav-height - @progress-height)/2;
          height: @progress-height;
          border-radius: 0.8rem;
          background-color: darken(@gray-lighter, 5%);
          box-shadow: none;

          > .progress-bar {
            .box-sizing(content-box); // Prevent the white border from being visible at 100% progress
            border-right: 0.1rem solid white;
            box-shadow: none;
          }
        }

        > .back-to-top {
          text-align: center;
          line-height: @nav-height;

          > a {
            display: inline-block;
            padding: 0 0.5rem;
          }

          &::before, &::after {
            font-size: 1.4em;
            color: @link-color;
            content: "\25b4"; // ▴
          }
        }

        > .nav {
          display: inline-block;
          font-size: 1.6rem;
          line-height: @nav-height;
          color: @brand-primary;
          .flex(1; 0; 10rem);

          &.disabled {
            opacity: 0.5;
          }
        }

        > .back {
          padding-right: 2rem;
          text-align: right;
<commit_msg>Fixed Initial Back Button<commit_after>@import "../../../../styles/variables.less";
@import "../../../../styles/mixins.less";

@nav-height: 4.9rem;
@progress-height: 0.9rem;
@button-width: 13rem;
@searchbar-margin: 3px;


.footer-nav {
  .media-nav > .media-toolbar > .media-navbar {
    width: 100%;
  }
}

.media-nav {
  &:not(.publishing) {
    background-color: @gray-lightest;
  }

  > .media-toolbar {
    > div,
    > span {
      display: inline-block;
      vertical-align: bottom;
    }

    .toggle.btn {
      background-color: @brand-primary;
      color: white;
      border: solid 2px @brand-primary;
      width: @button-width;
      margin: @searchbar-margin;
      .text {
        margin: 0 6px;
      }
      &.open {
        background-color: white;
        color: @brand-primary;
      }
      &:focus {
        box-shadow: 0 0 3px 2px lightblue;
      }
    }

    .searchbar {
      width: ~"calc(35% - " @button-width * .5 ~")";
      @media (max-width: 640px) {
        width: ~"calc(100% - " @button-width ~"- 3rem)"
      }
      position: relative;
      margin: @searchbar-margin;
      .fa {
        position: absolute;
        left: ~"calc(100% - 27px)";
        top: 0.3em;
        color: @gray-light;
        font-size: 150%;
        &.clear-search {
          cursor: pointer;
        }
      }
    }

    .media-navbar {
      width: ~"calc(65% - " @button-width * .7 ~")";
      @media (max-width: 640px) {
        width: 100%;
        display: block;
      }

      > .book-nav {
        .flexbox();
        .flex-flow(row; nowrap);
        .justify-content(center);
        .user-select(none);

        > .progress, > .back-to-top {
          .flex(1; 1; 75%);
        }

        > .progress {
          margin-top: (@nav-height - @progress-height)/2;
          height: @progress-height;
          border-radius: 0.8rem;
          background-color: darken(@gray-lighter, 5%);
          box-shadow: none;

          > .progress-bar {
            .box-sizing(content-box); // Prevent the white border from being visible at 100% progress
            border-right: 0.1rem solid white;
            box-shadow: none;
          }
        }

        > .back-to-top {
          text-align: center;
          line-height: @nav-height;

          > a {
            display: inline-block;
            padding: 0 0.5rem;
          }

          &::before, &::after {
            font-size: 1.4em;
            color: @link-color;
            content: "\25b4"; // ▴
          }
        }

        > .nav {
          display: inline-block;
          font-size: 1.6rem;
          line-height: @nav-height;
          color: @brand-primary;
          .flex(1; 0; 10rem);

          &.disabled {
            opacity: 0.5;
          }
        }

        > .back {
          padding-right: 1rem;
          text-align: right;

{'fraction_non_alphanumeric': 0.15702187720536345, 'fraction_numerical': 0.026817219477769938, 'mean_word_length': 1.3919831223628691, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 31, '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': '1352898', 'n_tokens_mistral': 1996, 'n_tokens_neox': 1841, 'n_words': 369}