/* https://iconpark.oceanengine.com/official
#7c7c7c
24px
*/

/* 縦線のスタイル */
.separator {
    width: 1px;
    height: 20px;
    background-color: var(--border-color);
    /* 縦線の色 */
    margin: 0 0px;
    /* アイコンとのスペース */
}

.icon-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border-radius: 4px;
    /* 枠線の角丸 */
    border: 1px solid transparent;
    /* 初期状態では透明 */
}

.icon-wrapper:hover {
    border: 1px solid rgba(0, 0, 0, 0);
    /* ホバー時に枠線を表示 */
    cursor: pointer;
}

.icon {
    width: 24px;
    height: 24px;
    background-size: cover;
    background-repeat: no-repeat;
}

.header-spacer {
  flex: 1 1 auto;
  max-width: 1px; /* 必要に応じて調整 */
  height: 1rem;

}
.header .icon-wrapper:hover {
    border: 1px solid rgb(187, 187, 187);
    /* ホバー時に枠線を表示 */
    cursor: pointer;
}

/** サイドメニュー閉じるアイコン */
.icon.sidemenu-close {
    background-image: url('../img/icon/line/expand-right.svg');
}
/** サイドメニュー開くアイコン */
.icon.sidemenu-close.toggle {
    background-image: url('../img/icon/line/expand-left.svg');
}

/** ファイルを開くアイコン */
.icon.file-open {
    background-image: url('../img/icon/line/folder-open.svg');
}

/** 新規ファイルアイコン */
.icon.new-file {
    background-image: url('../img/icon/line/file-addition-one.svg');
}

/** ファイル保存アイコン */
.icon.save-file {
    background-image: url('../img/icon/line/save-one.svg');
}

/** 保存済みファイルアイコン */
.icon.saved-file {
    background-image: url('../img/icon/line/save-one.svg');
}

/** 折り返しアイコン */
.icon.word-wrap {
    background-image: url('../img/icon/line/paragraph-break-two.svg');
}

.icon.word-wrap.on {
    background-image: url('../img/icon/muluti-color/paragraph-break-two.svg');
}

/* マクロファイルオープン */
.icon.macro-open {
    background-image: url('../img/icon/line/folder-code.svg');
}

/* マクロファイル新規オープン */
.icon.macro-new {
    background-image: url('../img/icon/line/file-code-one.svg');
}

/* 録音（マクロ）アイコン - デフォルト */
.icon.macro {
    /* 既存アイコンに合わせたサイズ/表示 */
    background-image: url('../img/icon/line/play-one.svg');
    /* background-size: cover;
    background-repeat: no-repeat; */
}

/* ヘルプ */
.icon.help {
    background-image: url('../img/icon/line/help.svg');
}