:root {
    --vscode-scrollbar-shadow: #000000;
    --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
    --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
    --terminal-background: #1a1b2e;
}

.xterm.light-theme {
    --vscode-scrollbar-shadow: #dddddd;
    --vscode-scrollbarSlider-background: rgba(100, 100, 100, 0.4);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
    --vscode-scrollbarSlider-activeBackground: rgba(0, 0, 0, 0.6);
    --terminal-background: #f5f7fa;
}

.xterm.dark-theme {
    --vscode-scrollbar-shadow: #000000;
    --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
    --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
    --terminal-background: #1a1b2e;
}

.xterm.hc-theme {
    --vscode-scrollbar-shadow: #000000;
    --vscode-scrollbarSlider-background: rgba(255, 255, 255, 0.6);
    --vscode-scrollbarSlider-hoverBackground: rgba(255, 255, 255, 0.8);
    --vscode-scrollbarSlider-activeBackground: #ffffff;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--terminal-background);
}

#terminal-container {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--terminal-background);
    box-sizing: border-box;
}

.xterm {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.xterm .xterm-viewport {
    margin: 0;
    padding: 0;
    background-color: var(--terminal-background);
    box-sizing: border-box;
    overflow-y: auto;
    scrollbar-color: var(--vscode-scrollbarSlider-background) transparent;
    scrollbar-width: thin;
}

.xterm .xterm-viewport::-webkit-scrollbar {
    width: 14px;
}

.xterm .xterm-viewport::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 6px;
}

.xterm .xterm-viewport::-webkit-scrollbar-thumb {
    background: var(--vscode-scrollbarSlider-background);
    border: 2px solid transparent;
    border-radius: 6px;
    background-clip: content-box;
}

.xterm .xterm-viewport::-webkit-scrollbar-thumb:hover {
    background: var(--vscode-scrollbarSlider-hoverBackground);
    background-clip: content-box;
}

.xterm .xterm-viewport::-webkit-scrollbar-thumb:active {
    background: var(--vscode-scrollbarSlider-activeBackground);
    background-clip: content-box;
}