#kireji_app tool-bar {
 position: absolute;
 top: 0;
 left: 0;
 width: var(--tool-bar-width);
 bottom: 0;
 display: flex;
 flex-flow: column;
}

#kireji_app tool-bar>button {
 width: var(--tool-bar-width);
 height: var(--tool-bar-width);
 display: block;
 padding: calc((var(--tool-bar-width) - var(--tab-icon-size)) / 2);
 text-align: center;
 font-size: var(--tab-icon-size);
 line-height: var(--tab-icon-size);
 position: relative;
}

body.modern #kireji_app tool-bar {
 box-shadow:
  inset -2px 0 0 -1px var(--bg-un-mode),
  inset 2px 0 0 -1px var(--bg-un-mode);
 background-color: var(--bg-mode-er);
}

body.modern #kireji_app:has(side-bar) tool-bar>button[data-active] {
 box-shadow: inset -5px 0 0 -1px var(--accent);
}

body.vintage #kireji_app tool-bar {
 top: 4px;
 bottom: 6px;
}

body.vintage #kireji_app tool-bar>button {
 box-shadow: var(--deep-outset);
}

body.vintage #kireji_app tool-bar>button.down,
body.vintage #kireji_app:has(side-bar) tool-bar>button[data-active] {
 box-shadow: var(--deep-inset);
 background: var(--bg-checker), var(--bg-un-mode);
}

body.vintage #kireji_app tool-bar>button {
 background-color: var(--bg);
}

body.vintage #kireji_app tool-bar>button:focus::after {
 border: 1px dotted white;
 mix-blend-mode: difference;
 content: "";
 position: absolute;
 margin: 3px;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 pointer-events: none;
}