#kireji_app #tab-group {
 position: absolute;
 z-index: 10;
 top: 0;
 right: 0;
 left: 0;
 height: var(--tab-group-height);
 margin: 0;
 font-weight: 300;
 background-color: var(--bg-mode-er);
 line-height: var(--tab-line-height);
 font-size: calc(var(--tab-line-height) * 2 / 3);
 white-space: pre;
 text-overflow: ellipsis;
 padding: 0;
 display: flex;
 flex-wrap: nowrap;
 flex-direction: row;
 overflow: hidden;
 overflow-x: auto;
 scrollbar-width: none;
 overscroll-behavior: none;
}

#kireji_app #tab-group::-webkit-scrollbar {
 display: none;
}

#kireji_app #tab-group>svg {
 height: var(--tab-line-height);
 width: var(--tab-line-height);
 stroke: var(--fg-mode-er);
 margin: 0;
 fill: none;
 border: none;
 cursor: pointer;
 outline: none;
}

#kireji_app #tab-group>svg:hover {
 stroke: var(--fg-mode);
 background-color: var(--bg-fade-2);
}

#kireji_app #tab-group:empty {
 display: none;
}

tab- {
 height: fit-content;
 white-space: pre;
 text-overflow: ellipsis;
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 gap: calc(var(--spacing) / 3);
 height: var(--tab-group-height);
 position: relative;
 background-color: transparent;
 color: var(--fg);
 flex: 0 0 fit-content;
 line-height: var(--tab-line-height);
}

tab- img {
 height: var(--tab-icon-size);
 margin: calc((var(--tab-group-height) - var(--tab-icon-size)) / 2) 0;
}

tab- .tab-button {
 font-size: var(--default-font-size);
 font-weight: 400;
 height: unset;
 padding-left: calc(var(--spacing) / 1.5);
 padding-right: var(--tab-group-height);
 display: flex;
 flex-direction: row;
 flex-wrap: nowrap;
 gap: calc(var(--spacing) / 3);
}

tab- .close-tab {
 position: absolute;
 text-align: center;
 font-size: var(--default-font-size);
}

tab-[data-drop-target]::before {
 pointer-events: none;
 content: "";
 position: absolute;
 width: 2px;
 background-color: white;
 height: 100%;
 top: 0;
 z-index: 999;
}

tab-[data-drag-preview] {
 width: min-content;
 pointer-events: none;
 position: fixed;
}

tab-[data-drag-preview] .tab-button {
 padding-right: calc(var(--spacing) / 1.5);
}

tab-[data-drag-preview] .close-tab {
 display: none;
}

tab-[data-drop-target="after"]::before {
 right: -1px;
}

tab-[data-drop-target="before"]::before {
 left: -1px;
}

tab-[data-preview]>.tab-button {
 font-style: italic;
}

body.modern tab- button:hover {
 color: var(--fg);
}

body.modern tab- .close-tab {
 border-radius: 50%;
 right: calc((var(--tab-group-height) - var(--tab-line-height)) / 2);
 top: calc((var(--tab-group-height) - var(--tab-line-height)) / 2);
 width: var(--tab-line-height);
 height: var(--tab-line-height);
}

body.modern tab- .close-tab:hover {
 background-color: var(--bg-light-er);
}

body.modern tab-[data-active] .close-tab:hover {
 background-color: var(--bg-light-est);
}

body.modern #kireji_app #tab-group {
 box-shadow:
  inset 0 -2px 0 -1px var(--bg-un-mode),
  inset -2px 0 0 -1px var(--bg-un-mode);
}

body.modern.dark tab-:not([data-active]):hover {
 background-color: var(--bg-mode);
}

body.modern.dark tab-[data-active] {
 background-color: var(--bg-mode);
}

body.modern.light tab-:is([data-active], :not([data-active]):hover) {
 background-color: var(--bg-light-est);
}

body.modern tab- {
 box-shadow:
  inset 0 -2px 0 -1px var(--bg-un-mode),
  inset -2px 0 0 -1px var(--bg-un-mode);
}

body.modern tab-[data-active] {
 box-shadow:
  inset 0 3px 0 -1px var(--accent),
  inset -2px 0 0 -1px var(--bg-un-mode);
}

body.modern>tab-[data-drag-preview] {
 box-shadow: inset 0 0 0 1px var(--bg-un-mode);
 background-color: var(--bg-light-est);
}

body.modern tab- .tab-button {
 line-height: var(--tab-group-height);
}

body.modern tab- .tab-path {
 font-size: calc(var(--tab-line-height) * 1 / 2);
 font-weight: 200;
 display: inline-block;
}

body.vintage #kireji_app #tab-group {
 height: calc(4px + var(--tab-group-height));
 background: transparent;
 padding: 0 2px;
 top: -8px;
 left: 0;
 right: 0;
}

body.vintage tab- .close-tab {
 right: 4px;
 top: 3px;
 width: calc(var(--tab-group-height) - 5px);
 height: calc(var(--tab-group-height) - 5px);
 line-height: calc(var(--tab-group-height) - 5px);
}

body.vintage tab- .close-tab:hover {
 box-shadow: var(--outset);
}

body.vintage tab- .close-tab.down {
 box-shadow: var(--deep-inset);
}

body.vintage tab-[data-active] .close-tab {
 right: 6px;
 top: 5px;
}

body.vintage tab-[data-active] {
 height: calc(var(--tab-group-height) + 4px);
 border-bottom-right-radius: 3px;
 border-bottom-left-radius: 3px;
 margin-left: -2px;
 margin-right: -2px;
 z-index: 2;
}

/*body.vintage tab- .tab-path {
 display: none;
}*/

body.vintage tab-:not([data-active]) {
 height: var(--tab-group-height);
 position: relative;
 top: 2px;
}

body.vintage tab-[data-active] .tab-button {
 height: calc(var(--tab-group-height) + 4px);
 padding-top: 2px;
 padding-right: calc(var(--tab-group-height) + 10px);
 padding-left: calc(var(--spacing) / 1.5 + 2px);
}

body.vintage tab- .tab-button {
 padding-right: calc(var(--tab-group-height) + 8px);
 border-top-left-radius: 2px;
 border-top-right-radius: 2px;
 background-color: var(--bg);
 line-height: var(--tab-group-height);
 box-shadow:
  inset -2px 0 0 -1px black,
  inset 1px 1px 0 0 var(--bg-light-est),
  inset -3px 0 0 -1px var(--bg-dark);
}

body.dark.vintage tab- .tab-button {
 box-shadow:
  inset -2px 0 0 -1px black,
  inset 1px 1px 0 0 var(--bg-light-er),
  inset -3px 0 0 -1px var(--bg-dark);
}

body.vintage tab- button:focus::after {
 border: 1px dotted white;
 mix-blend-mode: difference;
 content: "";
 position: absolute;
 pointer-events: none;
 --inset: 2px;
 left: var(--inset);
 right: var(--inset);
 top: var(--inset);
 bottom: var(--inset);
}

body.vintage tab- .tab-button:focus::after {
 right: calc(var(--tab-group-height) + var(--inset));
}

body.vintage tab-[data-active] .tab-button:focus::after {
 --inset: 4px;
}

body.vintage>tab-[data-drag-preview] .tab-button {
 box-shadow: inset 0 0 0 1px black;
}

body.vintage tab-[data-drop-target]::before {
 background: var(--bg-checker), var(--bg-dark-est);
 width: 4px;
}

body.vintage tab-[data-drop-target="after"]::before {
 right: -2px;
}

body.vintage tab-[data-drop-target="before"]::before {
 left: -2px;
}

body.vintage tab-[data-active][data-drop-target="after"]::before {
 right: 0;
 top: 2px;
 bottom: 2px;
}

body.vintage tab-[data-active][data-drop-target="before"]::before {
 left: 0;
 top: 2px;
 bottom: 2px;
}