/** pagination **/

  .pagination {
      display: flex;
      flex-direction: row;
      justify-content: center;
      list-style: none;
      white-space: nowrap;
      width: 100%;
      padding-top: 2em;
      a {
          -webkit-font-smoothing: antialiased;
          font-size: 12px;
          color: #bfbfbf;
          letter-spacing: 0.1em;
          font-weight: 700;
          padding: 5px 5px;
          text-decoration: none;
          transition: 0.3s;
      }
      li {
          padding-bottom: 3px;
          margin: 0 20px;
          box-sizing: border-box;
          position: relative;
          display: inline;
          &.disabled {
              display: none;
          }
          &:hover a {
              color:  $light-pagination-link-active-color;
          }

          .dark-theme &:hover a {
              color:  $dark-pagination-link-active-color;
          }

          &:before,
          &:after {
              position: absolute;
              content: "";
              width: 0;
              height: 3px;
              background: $light-pagination-link-active-color;
              transition: 0.3s;
              bottom: 0px;
          }
          .dark-theme &:before,
          .dark-theme &:after{
              background: $dark-pagination-link-active-color;
          }

          &:before .active,
          &:after .active {
              width: 100%;
          }
          &:before {
              left: 50%;
          }
          &:after {
              right: 50%;
          }
          &:hover {
              &:before,
              &:after {
                  width: 50%;
              }
          }
          &.active {
              a {
                  color: $light-pagination-link-active-color;
              }

              .dark-theme & a {
                  color: $dark-pagination-link-active-color;
              }
              &:before,
              &:after {
                  width: 60%;
              }
          }
      }
  }