// 開発コストが高いので没にした


/* # 基本 */
div.app {
    padding-top: 0;
    border-top-width: var(--navbar-max-height);
    border-top-style: solid;
    border-top-color: var(--tool-bg);
}

/* # ナビゲーションバー */
nav.navbar {
    /* ナビゲーションバー */
    height: var(--navbar-row-1-height);
    border-bottom-width: calc(var(--navbar-min-height) - var(--navbar-row-1-height));
    border-bottom-style: solid;
    border-bottom-color: var(--tool-bg);
    box-sizing: content-box;
    box-shadow: none;
}
.navbar > .container,
.app > .container:not([style]) {
    /* ナビゲーションバーとツールバー */
    /* 原則ページの左端にラインを合わせるが、
     * ウィンドウが狭くなった際にはウィンドウ端から8px離すようにする */
    padding: 0;
    width: calc(100% - (8px * 2));
}
.navbar {
    & .col-brand.dropdown > .dropdown-menu,
    & .col-menu .dropdown > .dropdown-menu {
        /* ドロップダウンメニュー */
        margin-top: calc(var(--navbar-max-height) - var(--navbar-row-1-height));
    }
}

/* # ツールバー */
.app > .container:not([style]) {
    /* ツールバー（プロジェクトタイトルとかが入っているバー） */
    position: sticky;
    margin-top: calc(-1 * var(--navbar-row-1-height) - var(--tool-margin-bottom));
    top: var(--navbar-row-1-height);
    z-index: 1010; /* navbarより10上 */
}
.app > .container:has(.alert-info) {
    /* システムメッセージのレイヤーを手前にする */
    z-index: 1020; /* ツールバーより10上 */
}
.container > .alert-info {
    /* システムメッセージ */
    position: fixed;
    top: calc(var(--navbar-row-1-height) + 5px);
    width: calc(100% - 16px);
    max-width: 1200px;
}
.quick-launch {
    .left-box .btn {
        /* プロジェクトタイトルのボタン */
        border-radius: 0;
        background-color: var(--tool-bg);
        height: var(--tool-height);
        min-height: inherit;

        &:first-child {
            border-radius: var(--tool-border-radius) 0 0 var(--tool-border-radius);
        }
        &:last-child {
            border-radius: 0 var(--tool-border-radius) var(--tool-border-radius) 0;
        }
        &:first-child:last-child {
            border-radius: var(--tool-border-radius);
        }
        &:hover {
            /* プロジェクトタイトルのボタン（ホバー時） */
            background-color: var(--tool-hover-bg);
        }
    }
    .right-box .dropdown .btn  {
        border-radius: var(--tool-border-radius);
    }
}
[data-hover-visible] .page-sort-menu a.tool-btn:hover {
    /* ツールバーの右側のボタン */
    background: var(--tool-hover-bg);
}