.book-header {
  font-family: @font-family-sans;

  overflow: visible;
  height: @header-height;
  padding: 0px 8px;
  z-index: 2;

  font-size: 0.85em;
  color: @header-color;
  background: @header-background;

  .btn {
    display: block;
    height: @header-height;
    padding: 0px 15px;
    border-bottom: none;
    color: @header-button-color;
    text-transform: uppercase;
    line-height: @header-height;
    .box-shadow(none) !important;
    position: relative;
    font-size: @font-size-base;

    &:hover {
      position: relative;
      text-decoration: none;
      color: @header-button-hover-color;
      background: @header-button-hover-background;
    }

    &:focus {
      outline: none;
    }
  }

  h1 {
    margin: 0px;
    font-size: 20px;
    font-weight: 200;
    text-align: center;
    line-height: @header-height;
    opacity: 0;
    .transition(opacity ease 0.4s);

    padding-left: 200px;
    padding-right: 200px;
    .transition(opacity 0.2s ease);

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    a,
    a:hover {
      color: inherit;
      text-decoration: none;
    }

    @media (max-width: 1000px) {
      display: none;
    }

    i {
      display: none;
    }
  }

  &:hover {
    h1 {
      opacity: 1;
    }
  }
}

.book {
  &.is-loading {
    .book-header h1 {
      i {
        display: inline-block;
      }

      a {
        display: none;
      }
    }
  }

  &.color-theme-1 {
    .book-header {
      color: @header-color-1;
      background: @header-background-1;

      .btn {
        color: @header-button-color-1;

        &:hover {
          color: @header-button-hover-color-1;
          background: @header-button-hover-background-1;
        }
      }

      h1 {
        color: @page-color-1;
      }
    }
  }

  &.color-theme-2 {
    .book-header {
      color: @header-color-2;
      background: @header-background-2;

      .btn {
        color: @header-button-color-2;

        &:hover {
          color: @header-button-hover-color-2;
          background: @header-button-hover-background-2;
        }
      }

      h1 {
        color: @page-color-2;
      }
    }
  }
}