@import "variables";

.collection {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;

  .facet-groups {
    height: 100%;
    width: $leftPanelWidth;
    overflow-y: scroll;
  }

  .collection-main {
    height: 100%;
    padding: $padding;
    overflow-y: scroll;
    flex: 1;
  }

  .empty-collection-message {
    padding: 1em;
    text-align: center;
    color: #888;
    font-size: 3em;
  }

  .books li {
    display: inline-block;
  }

  .navigation-links a {
    display: block;
    margin: 25px;
    text-align: center;
    background-color: #DDD;
    padding: 10px;
    overflow: hidden;
    font-size: 500%;
  }

  .loading-next-page {
    clear: both;
    text-align: center;
    height: 20px;
    padding: 10px 10px $bookHeight 10px;

    background-size: $stripeWidth $stripeWidth;
    background-image: linear-gradient(
      45deg,
      darken($pagecolor, 5%)  25%,
      $pagecolor      25%,
      $pagecolor      50%,
      darken($pagecolor, 5%)  50%,
      darken($pagecolor, 5%)  75%,
      $pagecolor      75%,
      $pagecolor
    );
    -webkit-animation: barberpole 2s linear infinite;
    animation: barberpole 2s linear infinite;

    h3 {
      line-height: 5;
    }
  }
}