/*
 * Autohide tab bar.
 * Forum link: https://forum.vivaldi.net/topic/107399/auto-hide-vertical-tabs-arc-browser-style
 */

:root {
    --tabbar-transition: transform .2s ease-out, opacity .2s ease-out;
    --scrollbar-width: 10px;
    --scrollbar-border-color: #9fb0cb;
    --tabbar-peek-width: 3px;
}

/*----- Scrollbar Styling -----*/

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar {
    padding: 0 2px !important;
    width: var(--scrollbar-width) !important;
    border: 1px solid var(--scrollbar-border-color) !important;
    border-radius: 8px !important;
}

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-button {
    display: none !important;
}

#tabs-tabbar-container:is(.left, .right) .tab-strip::-webkit-scrollbar-thumb {
    border: 2px solid transparent !important;
    border-radius: 8px !important;
}

/*----- Vertical Tabbar Auto-Hide Behavior -----*/

/* Base hidden state for vertical tabbar */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper {
    position: absolute;
    transform: translateX(calc(-100% + var(--tabbar-peek-width)));
    transition: var(--tabbar-transition) !important;
    opacity: 0;
    z-index: 1;
}

/* Right side positioning */
#browser.tabs-right .tabbar-wrapper {
    right: 0;
    transform: translateX(calc(100% - var(--tabbar-peek-width)));
}

/* Tab move functionality support */
#browser.tabs-left.isblurred:where(:has(div.tab-yield-space, .tab-acceptsdrop)) .tabbar-wrapper,
#browser.tabs-left.isblurred:is(:active, :focus) .tabbar-wrapper:is(:active, :focus) {
    transform: translateX(0);
    opacity: 1;
}

/* Show tabbar on hover */
#browser:is(.tabs-left, .tabs-right) .tabbar-wrapper:hover {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
}

/* Show when mouse approaches edge of screen */
#browser:is(.tabs-left) .mainbar:hover + .tabbar-wrapper,
#browser:is(.tabs-right) .webpage:hover + .tabbar-wrapper {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
}

/* Show when workspace popups are active */
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup:visible,
                                        .workspace-popup:visible) .tabbar-wrapper {
    transform: translateX(0);
    transition: var(--tabbar-transition) !important;
    opacity: 1;
}

/* Keep tab bar visible during workspace naming */
#browser:is(.tabs-left, .tabs-right):has(.quick-command-container.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.workspace-naming) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(.WorkspacePopup) .tabbar-wrapper,
#browser:is(.tabs-left, .tabs-right):has(input[placeholder*="workspace"]) .tabbar-wrapper {
    transform: translateX(0) !important;
    transition: none !important;
    opacity: 1 !important;
}

/* Hide on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
                   .quick-command-container.workspace-naming,
                   .workspace-naming,
                   input[placeholder="workspace"]:focus,
                   .WorkspacePopup:visible,
                   .workspace-popup:visible)) .tabbar-wrapper {
    transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
    transition: var(--tabbar-transition) !important;
    opacity: 0 !important;
}

/* Fix right side hiding behavior on click outside */
html:active:not(:has(.tabbar-wrapper:hover,
                   .quick-command-container.workspace-naming,
                   .workspace-naming,
                   input[placeholder="workspace"]:focus,
                   .WorkspacePopup:visible,
                   .workspace-popup:visible)) #browser.tabs-right .tabbar-wrapper {
    transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
}

/* Additional reset mechanism for when tabs get stuck */
html:active:active .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
                                                       .workspace-naming,
                                                       input[placeholder="workspace"]:focus)) {
    transform: translateX(calc(-100% + var(--tabbar-peek-width))) !important;
    opacity: 0 !important;
}

/* Additional reset for right side */
html:active:active #browser.tabs-right .tabbar-wrapper:not(:hover):not(:has(.quick-command-container.workspace-naming,
                                                                          .workspace-naming,
                                                                          input[placeholder="workspace"]:focus)) {
    transform: translateX(calc(100% - var(--tabbar-peek-width))) !important;
    opacity: 0 !important;
}