/*
 * scrollHintのカスタムスタイル
 * ライブラリのスタイルを上書きするため、!importantを使用しています
 *
 * 注意: このファイルは webpack.mix.desktop.js の .copy() で
 * public/css/scrollHint.css としてそのまま配信されます。SCSSとして
 * コンパイルされないため、行コメント (スラッシュ2つ) を書くと CSS パーサに
 * 不正トークンとして扱われ、直後のルールが丸ごと破棄されます。
 * コメントは必ずこのブロック形式で書いてください。
 *
 * ルールは責務で2つに分かれています。
 * - 前半 (.wonder-scroll-hint 配下): ライブラリのデフォルト値の上書き。
 *   CDN (unpkg の scroll-hint.css) に到達できなくても見た目が保たれるよう、
 *   依存している値は自前で持ちます。
 * - 後半 (.wonder-scroll-hint を含まないセレクタ): 文言を1行に収めるための指定。
 *   ECブロックのヒントにも効かせる必要があるため詳細度を上げていません。
 *   幅と中央寄せはこちらに集約しているので、前半では指定しないでください。
 */

/*
 * 吹き出しの見た目。
 *
 * 不透明度は通常時 0 / is-active 時 .8 で、どちらもここで !important 付きで
 * 指定します。初期値だけを !important で指定するとライブラリ側の表示ルール
 * .scroll-hint-icon-wrap.is-active .scroll-hint-icon { opacity: .8 } を
 * 打ち消してヒントが表示されなくなるため、必ず対で指定してください。
 */
.wonder-scroll-hint .scroll-hint-icon-wrap .scroll-hint-icon {
    position: absolute !important;
    top: calc(50% - 60px) !important;
    box-sizing: border-box !important;
    border-radius: 5px !important;
    transition: opacity .3s !important;
    opacity: 0 !important;
    background: rgba(0, 0, 0, .7) !important;
    text-align: center !important;
    padding: 15px 10px !important;
}
.wonder-scroll-hint .scroll-hint-icon-wrap.is-active .scroll-hint-icon {
    opacity: .8 !important;
}
.wonder-scroll-hint .scroll-hint-icon-wrap .scroll-hint-text {
    font-weight: bold !important;
    font-size: 0.79rem !important;
    line-height: 1.25rem !important;
}
.wonder-scroll-hint .scroll-hint-icon-wrap .scroll-hint-icon:before {
    content: none !important;
}
.wonder-scroll-hint .scroll-hint-icon-wrap .scroll-hint-icon::after {
    content: none !important;
}
.wonder-scroll-hint .scroll-hint-icon-wrap .scroll-hint-icon {
    height: auto !important;
    top: calc(50% - 60px) !important;
    zoom: 1.5 !important;
    padding: 15px 10px !important;
    z-index: 10000000 !important;
}
.wonder-scroll-container.enabled.wonder-scroll-hint {
    position: relative !important;
}
.wonder-scroll-container.enabled.wonder-scroll-hint.scroll-bar-top .scroll-hint-icon-wrap {
    transform: scale(1, -1) !important;
}

/*
 * 文言を1行に収めるための指定。
 *
 * text-size-adjust: auto は zoom-by-width.js の SP 文字サイズ補正 (LP本文の文字を
 * 対象に font-size をインライン style + !important で上書きする処理) から
 * この要素を外すための指定です。補正は text-size-adjust の実効値が auto の要素を
 * 対象外にするため、auto を明示することで除外できます。
 *
 * 除外する理由は2つあります。
 * 1. 補正が掛かると画面幅によらず画面上 19px 相当まで拡大され、枠が横に伸びます。
 *    吹き出しはLP本文ではなくUI部品なので、本文向けの補正に追従させる必要がありません。
 * 2. 補正は iOS 26.4 未満では適用されない (WebKit 側が逆補正していたため) ので、
 *    対象にしたままだと端末で文字サイズが変わります。auto は新旧どちらの環境でも
 *    同じ扱いになるため、見え方を環境に依存させずに済みます。
 *
 * ECブロックのスクロールヒント (EcBlockLoader.js が生成、.wonder-scroll-hint が
 * 付かない) にも効かせるため、セレクタは .wonder-scroll-hint を含めません。
 */
.scroll-hint-icon-wrap .scroll-hint-text {
    white-space: nowrap !important;
    -webkit-text-size-adjust: auto !important;
    text-size-adjust: auto !important;
}

/*
 * 吹き出しの幅と中央寄せ。
 *
 * 折り返さないぶん幅は文言に合わせて伸ばし、従来幅の 120px を下限にします。
 * 幅が可変になるので、中央寄せは left の固定値ではなく translateX で行います。
 *
 * max-width は上限として完全には機能しません。この要素には zoom: 1.5 が
 * 掛かっており、100% は zoom 適用前の値として解決されるため、実際の表示幅は
 * 親の 150% まで許容されます。スクロールコンテナが枠より狭い場合は左右に
 * はみ出しますが、横スクロールが起きるコンテナは画面幅相当のため実害はありません。
 * 値を絞ってもテキストは nowrap のまま溢れるだけなので、無制限に広がるのを
 * 防ぐ緩い上限として置いています。
 */
.scroll-hint-icon-wrap .scroll-hint-icon {
    left: 50% !important;
    transform: translateX(-50%) !important;
    min-width: 120px !important;
    width: max-content !important;
    max-width: 100% !important;
}