/* =============================================
   Shiki Highlighter Styles
   ============================================= */
.shiki-hl-wrapper {
    position: relative;
    margin: 1.5em 0;



    /*
   * ヘッダー（ファイル名や言語名）
   */
    .shiki-hl-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5em 1em;
        background-color: #3a3a3a;
        color: #d4d4d4;
        font-size: 0.85em;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;



        .shiki-hl-file-name {
            font-weight: bold;
        }

        .shiki-hl-language-name {
            text-transform: none;
        }

        /* ヘッダー内のアイコン用 */
        [class*="shiki-hl-"] i {
            margin-right: 0.25em;
            color: #d4d4d4;
        }
    }

    .shiki-hl-header-left {

        display: flex;
        justify-content: space-between;
        /* 左の要素群と右の要素群を両端に配置 */
        align-items: center;
        /* 内側の余白 */
        gap: 1em;
        /* 要素間の隙間 */
    }

    /* ファイル名（右側に配置したい要素） */
    .shiki-hl-file-name {
        /* ファイル名が長い場合に省略記号(...)で表示する設定 */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /*
   * Shikiが出力するコードブロック本体 (`pre` タグ)
   */
    pre.shiki {
        /* ヘッダーと繋がるように角丸とマージンを調整 */
        margin-top: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        /* ハイライト行のスタイル */
        .line.highlighted {
            background-color: #363b46;

            /* Shikiのデフォルトpaddingを考慮して行全体に背景色を適用 */
            display: block;
            margin: 0 -24px;
            padding: 0 24px;
        }
    }

    /*
   * 内部の `code` 要素の基本設定
   * CSSカウンターによる行番号表示の準備
   */
    code {
        display: block;
        counter-reset: step;
        counter-increment: step 0;
    }

    /*
   * 行番号の表示・非表示
   */
    /* 行番号が表示されない場合 */
    &:not(.show-line-number) code {
        padding: 0.5em 0.5em 0.5em 1em;
    }

    /* 行番号が表示される場合 (CSSカウンターを使用) */
    &.show-line-number code {
        .line::before {
            content: counter(step);
            counter-increment: step;

            /* レイアウト */
            display: inline-flex;
            justify-content: flex-end;
            /* 番号を右揃えに */
            width: 1.5rem;

            /* 余白 */
            padding-left: 2em;
            padding-right: 0.5em;
            margin-right: 0.5em;

            /* 装飾 */
            color: #ccc;
            border-right: 1px solid #ccc;
            user-select: none;
            /* 行番号を選択不可に */
        }
    }
}

/* === Copy Toast Notification Styles === */
.shiki-hl-copy-button {
    background: transparent;
    border: none;
    color: #d4d4d4;
    cursor: pointer;
    padding: 0.25em;
    opacity: 0.7;
    transition: opacity 0.2s ease;

    &:hover {
        opacity: 1;
    }

    i {
        font-size: 1em;
    }
}


/* トーストの基本スタイル */
.shiki-hl-toast {
    position: fixed;
    z-index: 9999;
    background-color: #2d3748;
    /* ダークグレー */
    color: #ffffff;
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: none;
    /* トーストがクリックを妨げないようにする */
}

/* 表示時のアニメーション */
.shiki-hl-toast.show {
    opacity: 1;
}

/* 位置の指定 */
.shiki-hl-toast.top-right {
    top: 20px;
    right: 20px;
    transform: translateX(100%);
}

.shiki-hl-toast.top-right.show {
    transform: translateX(0);
}

.shiki-hl-toast.top-left {
    top: 20px;
    left: 20px;
    transform: translateX(-100%);
}

.shiki-hl-toast.top-left.show {
    transform: translateX(0);
}

.shiki-hl-toast.bottom-right {
    bottom: 20px;
    right: 20px;
    transform: translateX(100%);
}

.shiki-hl-toast.bottom-right.show {
    transform: translateX(0);
}

.shiki-hl-toast.bottom-left {
    bottom: 20px;
    left: 20px;
    transform: translateX(-100%);
}

.shiki-hl-toast.bottom-left.show {
    transform: translateX(0);
}