:root {
    --arrowscrollbox-image: url("chrome://echelon/content/firefox-4/tabbrowser/tab-arrow-left.png") !important;
    &:not([echelon-system-style="winxp"])[echelon-style-3],
    &[lwtheme-brighttext] {
        --arrowscrollbox-image: url("chrome://echelon/content/firefox-8/tabbrowser/tab-arrow-left-inverted.png") !important;
    }
}

#TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button),
#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    padding: 0 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    margin: 0 !important;
}

#tabbrowser-arrowscrollbox::part(scrollbox) {
    padding-inline: var(--tabbrowser-arrowbox-inline-padding) !important;
}

#TabsToolbar .toolbarbutton-1:not(#tabs-newtab-button),
#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(scrollbutton-up),
#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(scrollbutton-down) {
    &:hover {
        background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,.5)),
                          linear-gradient(transparent, rgba(0,0,0,.25) 30%),
                          linear-gradient(transparent, rgba(0,0,0,.25) 30%) !important;
        background-position: 1px -1px, 0 -1px, 100% -1px !important;
        background-size: calc(100% - 2px) 100%, 1px 100%, 1px 100% !important;
        background-repeat: no-repeat !important;
    }
}

#tabbrowser-arrowscrollbox::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    margin: 0 !important;
    padding-inline-end: 2px !important;
    border-inline-end: 2px solid transparent !important;
    background-origin: border-box !important;
}

#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(scrollbutton-up),
#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(scrollbutton-down) {
    border-image: url("chrome://echelon/content/firefox-4/tabbrowser/tab-overflow-border.png") 0 2 0 2 / 0 2px 0 0 !important;
}

#tabbrowser-arrowscrollbox[scrolledtostart]::part(scrollbutton-up),
#tabbrowser-arrowscrollbox[scrolledtoend]::part(scrollbutton-down) {
    opacity: 0.4 !important;
}

#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(scrollbutton-up),
#tabbrowser-arrowscrollbox::part(scrollbutton-down) {
    transform: scaleX(-1) !important;
}

#tabbrowser-arrowscrollbox::part(overflow-start-indicator),
#tabbrowser-arrowscrollbox::part(overflow-end-indicator) {
    visibility: collapse !important;
}