/* "There is more this way" arrows for something that scrolls inside the page (js/more-hints.js): an arrow on each
   side that has more, over a fade; a tap on it moves things along. A page sets --more-size for a bigger arrow. */
.more-box { position: relative; min-width: 0; }
.more-box--v { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.more-box--v > * { min-height: 0; }
.more-hint { position: absolute; top: 0; bottom: 0; z-index: 1; width: calc(var(--more-size, 30px) + 18px); display: none; align-items: center; color: #0f766e; font-size: calc(var(--more-size, 30px) * .74); line-height: 1; pointer-events: none; }
.more-hint i { width: var(--more-size, 30px); height: var(--more-size, 30px); border-radius: 50%; display: grid; place-items: center; background: #fff; border: 1px solid #d0cabe; box-shadow: 0 1px 4px rgba(28, 35, 33, .18); cursor: pointer; pointer-events: auto; }
.more-hint--left { left: 0; justify-content: flex-start; background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)); }
.more-hint--right { right: 0; justify-content: flex-end; background: linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)); }
.more-hint--up, .more-hint--down { left: 0; right: 0; width: auto; height: calc(var(--more-size, 30px) + 16px); justify-content: center; }
.more-hint--up { bottom: auto; align-items: flex-start; padding-top: 6px; background: linear-gradient(to bottom, #fff 15%, rgba(255, 255, 255, 0)); }
.more-hint--down { top: auto; align-items: flex-end; padding-bottom: 6px; background: linear-gradient(to top, #fff 15%, rgba(255, 255, 255, 0)); }
.more-box.has-left > .more-hint--left, .more-box.has-right > .more-hint--right,
.more-box.has-up > .more-hint--up, .more-box.has-down > .more-hint--down { display: flex; }