/* ************************************************** */
/* #region TAB SYSTEM CONTAINER                       */
/* ************************************************** */

/* Hide tab-system-container when no tabs */
.tab-system-container:not(:has(.tab)) {
    display: none;
}

/* #endregion */

/* ************************************************** */
/* #region TABS BAR                                   */
/* ************************************************** */

tabs-bar {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 100%;
    padding-top: 4px;
}

/* #endregion */

/* ************************************************** */
/* #region ADD-TAB BUTTON                             */
/* ************************************************** */

.add-tab-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.125em;
    border-top: var(--border-width) solid transparent;
    border-bottom: var(--border-width) solid transparent;
}

/* hide the add-tab button when tabs bar doesn't require it */
.add-tab-button-wrapper:not(:has(.add-tab-button)) {
    /* display: none; */
    width: 0.5em;
}

/* add bottom border under button when there are tabs */
tabs-bar:has(.tab) .add-tab-button-wrapper {
    border-bottom-color: var(--border-color);
}

.add-tab-button:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

/*
.add-tab-button [icon] svg {
    width: 1.5em;
    height: 1.5em;
} */

tabs-bar:has(.tab.dragging) .add-tab-button {
    visibility: hidden;
}

/* #endregion */

/* ************************************************** */
/* #region TABS CONTAINER                             */
/* ************************************************** */

.tabs-container-wrapper {
    flex: 1;
    position: relative;
    min-width: 0;
    z-index: 1;
}

.tabs-container {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    pointer-events: none;  /* allows for vertical scrolling when horizontal scrolling is unenabled */
    scroll-behavior: smooth;
}

/* Add spacer after last tab */
.tabs-container::after {
    content: "\00a0";
    flex: 1;
    min-width: 28px;
    border-bottom: var(--border-width) solid transparent; /* initially invisible (if no tabs) */
}

/* show bottom border on after if tabs are present */
.tabs-container:has(.tab)::after,
.tabs-container:has(tab-element)::after {
    border-bottom: var(--border-width) solid var(--border-color);
}

/* Hide overlay scrollbars when context menu is open */
.tabs-container:has(.tab.context-menu-target) .overlay-scrollbar-container {
    visibility: hidden;
}

/* Shift overlay scrollbar down */
tabs-container .overlay-scrollbar-container.horizontal > .overlay-scrollbar-track > .overlay-scrollbar-thumb::after {
    width:  100%;
    height: var(--overlay-scrollbar-thumb-width);
    transform: translate(0px, 6px);
}

/* #endregion */

/* ************************************************** */
/* #region TAB                                        */
/* ************************************************** */

.tab {
    isolation: isolate;
    flex-shrink: 0;
    display: grid;
    grid-template-areas: "tab";
    align-items: center;
    position: relative;
    padding-inline: 0.125em;
    padding-block: 0.125em;
    background-color: var(--bg-color);
    border: var(--border-width) solid var(--border-color);
    border-right: 0;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    overflow: hidden;
    pointer-events: auto;  /* re-enable pointer-events on tabs since they're turned off on the container */
}

.tab:last-child {
    border-right: var(--border-width) solid var(--border-color);
}

/* When tab is active (i.e., dragged), disable pointer events on other tabs */
tabs-container:has(.tab-label:active) .tab:not(:has(.tab-label:active)) {
    pointer-events: none;
}

.tab.selected {
    border-bottom-color: transparent;
}

/* Hide left border of first tab if no "add tab" button */
tabs-bar:not(:has(.add-tab-button)) .tab:nth-child(1 of .tab) {
    /* border-left: 0; */
}

/* ---------------------------------------- */
/* ----- Context menu visible styling ----- */
/* ---------------------------------------- */

.tab.context-menu-target .select-tab-button {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.tab.context-menu-target .close-tab-button {
    visibility: hidden;
}

/* #endregion */

/* ************************************************** */
/* #region TAB LABEL                                  */
/* ************************************************** */

.tab-label {
    grid-area: tab;
    padding-inline: 0.25em 1.75em;
}

.tab[data-closable="false"] .tab-label {
    padding-inline: 0.25em;
}

.tab-label:hover {
    text-decoration: underline;
}

.tab-label span {
    display: block;
    align-content: center;
    max-width: 24ch;
    height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* #endregion */

/* ************************************************** */
/* #region TAB TOOLS                                  */
/* ************************************************** */

.tab-tools {
    grid-area: tab;
    justify-self: flex-end;
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 0.25em;
    width: fit-content;
    height: fit-content;
    opacity: 0;
    z-index: 1;
}

.tab-tool:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.tab:has(:focus-visible) .tab-tools,
.tab-tools:focus-within,
.tab:hover .tab-tools { opacity: 1; }


/* Show close-tab button when tab has focus */
.close-tab-button:focus,
.tab-label:has(:focus) + .close-tab-button {
    opacity: 1;
}

/* Hide close button in non-closable tabs */
.tab[data-closable="false"] .close-tab-button {
    display: none;
}

/* Hide close button when when renaming */
.tab:has([contenteditable="true"]) .close-tab-button {
    visibility: hidden;
}

/* Show close button for selected tabs */
.tab.selected .close-tab-button {
    opacity: 1;
}

/* #endregion */

/* ************************************************** */
/* #region TAB RENAMING STATE                         */
/* ************************************************** */

.tab:has([contenteditable="true"]) {
    pointer-events: none;
}

.tab-label span[contenteditable="true"] {
    cursor: text;
    pointer-events: auto;
    text-overflow: initial;
}

/* #endregion */

/* ************************************************** */
/* #region TAB DRAGGING STATE                         */
/* ************************************************** */

.tab-placeholder {
    flex-shrink: 0;
    border: 0;
    border-bottom: var(--border-width) solid var(--border-color);
}

.tab.dragging {
    position: absolute;
    bottom: 0;
    left: 0;
    pointer-events: none;
    z-index: 1000;
}

.tab:not(.selected).dragging {
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    translate: 0 -4px;
}

.tab.selected.dragging {
    border: var(--border-width) solid var(--border-color);
    border-bottom-color: transparent;
}

/* Show right border if tab to the right of it is being dragged */
.tab:has(+ .tab.dragging) {
    border-right: var(--border-width) solid var(--border-color);
}

/* Ensure grabbing cursor everywhere while tab is being dragged */
body:has(.tab.dragging) {
    cursor: grabbing !important;
}

/* Prevent pointer events on everything while tab is being dragged */
body:has(.tab.dragging) :not(tabs-bar) {
    pointer-events: none;
}

/* #endregion */

/* ************************************************** */
/* #region TABS-LIST                                  */
/* ************************************************** */

.tabs-list-activator-wrapper {
    display: none;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 0;
    padding: .125em;
    background-color: var(--bg-color);
    border-top: var(--border-width) solid transparent;
    border-bottom: var(--border-width) solid var(--border-color);
    z-index: 2;
}

.tabs-bar:has(.tab) .tabs-list-activator-wrapper {
    display: flex;
}

.tabs-list-activator:hover {
    background-color: var(--bg-color-hover);
    color: var(--text-color-hover);
}

.tabs-list-activator::before {
    content: "⏷";
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5em;
    height: 1.5em;
}

tabs-bar:has(.tab.dragging) .tabs-list-activator-wrapper {
    visibility: hidden;
}

/* #endregion */

/* ************************************************** */
/* #region TABS-CONTENT-CONTAINER                     */
/* ************************************************** */

.tab-content-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-content: center;
    position: relative;
    width: 100%;
    min-height: 0;
    overflow: auto;
}

/* #endregion */

/* ************************************************** */
/* #region TAB-CONTENT                                */
/* ************************************************** */

.tab-content {
    display: none;
    flex-direction: column;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
}

.tab-content.active {
    display: flex;  /* Default is flex, but can be overwritten with "block" if need be (i.e., parsed markddown) */
}

/* #endregion */