.toolbar-icon {
    font-size: 1.1875rem;
}

.btn-icon {
  border: none;
}

.book-title {
    margin: 0.5rem 0 0.25rem !important;
}

// Override since it's not coming from library
::ng-deep #presentationMode {
    margin: 0.1875rem 0 0.25rem !important;
}

::ng-deep .dark > ngx-extended-pdf-viewer .treeItem>a {
    color: lightblue !important;
}

.loading-message-container {
  text-align: center;
  min-width: 12.5rem;
}

.progress-container {
    width: 100%;
}
.progress-bar {
    // NOTE: We have to override due to theme variables not being available
    background-color: #3B9E76;
}

$pagination-color: transparent;
$pagination-opacity: 0;

//$pagination-color: red;
//$pagination-opacity: 0.7;
$action-bar-height: 2.25rem;
$loading-bar-height: 1.5rem;

// Tap to Paginate


.right {
  position: absolute;
  right: 0;
  top: $action-bar-height;
  width: 20vw;
  z-index: 3;
  background: $pagination-color;
  border-color: transparent;
  border: none !important;
  opacity: $pagination-opacity;
  outline: none;
  height: 100%;

  &.immersive {
    top: 0;
  }

  &.no-pointer-events {
    pointer-events: none;
  }
}



// This class pushes the click area to the left a bit to let users click the scrollbar
.right-with-scrollbar {
  position: absolute;
  right: 1.0625rem;
  top: $action-bar-height;
  width: 18vw;
  z-index: 3;
  background: $pagination-color;
  opacity: $pagination-opacity;
  border-color: transparent;
  border: none !important;
  outline: none;
  height: 100%;
  cursor: pointer;

  &.immersive {
    top: 0;
  }
}

.left {
  position: absolute;
  left: 0;
  top: $action-bar-height;
  width: 20vw;
  background: $pagination-color;
  opacity: $pagination-opacity;
  border-color: transparent;
  border: none !important;
  z-index: 3;
  outline: none;
  height: 100%;
  cursor: pointer;

  &.immersive {
    top: 0;
  }
}


