

// Hide on custom html pages (typically, landing pages) and info pages. People seem to just
// get confused & annoyed. The point with the scroll buttons is to navigate the comments.
.s_PT-1,  // custom html, e.g. landing page
.s_PT-2   // info page
  .esScrollBtns_fixedBar
    display: none;
/* But let's show the buttons on these pages?:
   E.g. forum topic list pages: Someone tried to use iOS Safari's double tap top
   nav bar, to jump to top — but doesn't work with Talkayrd, because there's a
   content-scrollable and then iOS jump-to-top won't work.
   But we can show Ty's own jump button — then works also on Android, plus for
   iOS users who don't know about the shortcut.
.s_PT-3,  // code page
.s_PT-4,  // special content
.s_PT-6,  // blog
.s_PT-7   // forum
*/

.esScrollBtns_fixedBar
  position: fixed;
  top: auto;
  bottom: 0;
  z-index: 4;
  pointer-events: none;
  background: none !important; // IE11

.esScrollBtns
  float: right;

.esScrollBtns_menu,
.esScrollBtns_back
  pointer-events: auto;
  padding: 5px 10px;
  height: 35px;  // used in e2e test, [6WRD25]
  font-size: 15px;
  border: none;
  font-weight: bold;
  color: white;
  background: hsl($uiHue, 80%, 54%);
  &:hover,
  &:focus
    color: white;
  &:hover
    background: hsl($uiHue, 80%, 70%);
  &:focus
    background: hsl($uiHue, 80%, 63%);

.esScrollBtns_back
  border-left: 1px solid white;
  &[disabled]
    background: hsl($uiHue, 30%, 45%);
    opacity: 0.4;

.esScrollBtns_back_shortcut
  text-decoration: underline;
  font-size: 17px;

.esScrollDlg
  padding: 12px 19px 10px 12px !important;
  .btn
    margin-right: 1px;
    padding-left: 10px; // else too much
    // Make space for two lines, and line-break if needed.
    height: 50px;
    max-width: 120px;
    white-space: normal;


.esScrollDlg_title
  margin-bottom: 6px;

.esScrollDlg_Up_Arw,
.esScrollDlg_Down_Arw
  display: inline-block;
  font-size: 20px;
  line-height: 14px;
  position: relative;

.esScrollDlg_Up_Arw
  rotateFn(-90deg);
  top: 3px;
  width: 14px;
  left: -3px;

.esScrollDlg_Replies
  .icon-comment:before
    position: relative;
    left: -2px;

.esScrollDlg_Comments
  padding-top: 4px;
  .icon-comment
    vertical-align: middle;
    display: inline-block;
    position: relative;
    top: -2px;
    left: -3px;
  .esScrollDlg_Comments_Text
    text-align: center;
    display: inline-block;
    vertical-align: middle;

.esScrollDlg_Down_Arw
  rotateFn(90deg);
  top: 2px;
  width: 15px;
  left: -2px;

.esScrollDlg_shortcuts
  margin-top: 12px;