@charset "UTF-8";

/* selection share menu ーーーーーーーーーーーーー*/
/*
 * 見た目(枠線・区切り線・アイコンサイズ等)は .p-articleContant 配下の
 * 既存クラス(.c-contentAuthorIconListWrap 等、base.css)をそのまま流用する。
 * ここでは選択範囲追従のための position/表示切替のみを追加する。
 */
.c-selectionShare {
    position: fixed;
    top: 0;
    left: 0;
    background: var(--white-color);
    box-shadow: var(--box-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s;
    /* memo_functionの固定UI(.mb-bar等、最大10000)とPianoのキャンペーンフッター
       (.piano-drawer-wrapper、90000)より上に。Pianoの実際のモーダル/背景
       (.piano-modal-backdrop 99999 / .piano-modal-wrapper 100000)より下に留める。 */
    z-index: 91000;
}

.c-selectionShare.is-active {
    opacity: 1;
    pointer-events: auto;
}

/* 複製元は<a>だが、target/hrefの誤動作を避けるため<button>に差し替えている。
   ボタンのデフォルト装飾を消し、元の<a>と見た目が変わらないようにする。 */
.c-selectionShare button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

/* Facebookは quote パラメータが反映されないため、コピー完了を知らせるトースト。
   別ウインドウが開く前に気づいてもらえるよう、画面上下中央に帯状で大きく表示する。 */
.c-selectionShare__toast {
    position: fixed;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    background: var(--accent-color-black);
    color: var(--text5-color);
    padding: 16px 24px;
    text-align: center;
    font-size: 14px;
    box-shadow: var(--box-shadow);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s;
    z-index: 91000;
}

.c-selectionShare__toast.is-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .c-selectionShare__toast {
        transition: none;
    }
}