@import "colors";

/*
<div id="pagination">
  <a rel="prev"><span><i class="fa fa-caret-left"></i></span></a>
  <a rel="self"><span>1</span></a>
  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
  <span><i class="fa fa-ellipsis-h"></i></span>
  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a>
</div>
*/

#pagination {
  position: fixed;
  right: 20px;
  bottom: 10px;
  z-index: 400;
  span {
    display: inline-block;
    background-color: $pagination-bg;
    height: 1.5em;
    line-height: 1.5em;
    padding: {
      left: .4em;
      right: .4em;
    }
    text-align: center;
    border: {
      top-width: 2px;
      top-style: solid;
      bottom-width:  2px;
      bottom-style: solid;
      color: $pagination-border;
    }
    box-shadow: $pagination-box-shadow;
  }
  a {
    text-shadow: $light-shadow;
    &[rel=self] span {
      border: {
	color: $dark-orange;
	left-style: solid;
	right-style: solid;
	left-width: 2px;
	right-width: 2px;
      }
      background-color: $light-orange;
      color: $darkest-orange;
    }
    &[rel=next] span {
      border: {
	right-width: 2px;
	right-style: solid;
	top-right-radius: 12px;
	bottom-right-radius: 12px;
      }
    }
    &[rel=prev] span {
      border: {
	left-width: 2px;
	left-style: solid;
	top-left-radius: 12px;
	bottom-left-radius: 12px;
      }      
    }
    &[href] {
      color: $light-green;
      span:hover {
        background-color: $light-green;
        border-color: $dark-green;
        color: $dark-green;
        text-shadow: none;
      }
    }
  }
}