/* Tabs */
@-moz-document url-prefix("about:devtools-toolbox") {
    .devtools-tabbar {
        background-color: transparent !important;

        @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
            min-height: 21px !important;
        }
    }

    .toolbox-tabs {
        > button {
            > img {
                display: none !important;
            }
        }
    }

    .devtools-tab {
        &.selected {
            color: black !important;
        }
    }

    .devtools-separator,
    .devtools-tab-line {
        display: none !important;
    }

    .devtools-tab-label {
        padding: 0 !important;
        mask-image: none !important;
    }

    @supports not (-moz-bool-pref("BeautyFox.appearance.IE10")) {
        #toolbox-toolbar-mount {
            background-color: rgb(227,238,251) !important;
        }
    
        .devtools-tabbar {
            padding-top: 2px !important;
            border-bottom: 1px solid rgb(163,167,172) !important;
        }
    
        .toolbox-tabs {
            align-items: end !important;
        }
    
        .devtools-tab {
            position: relative;
            appearance: none;
    
            border-style: solid !important;
            border-color: transparent !important;
            border-width: 1px !important;
            border-bottom-width: 0 !important;
            border-radius: 2px 2px 0 0 !important;
    
            margin: 1px 2px 0 2px !important;
    
            &:hover {
                background-color: transparent !important;
            }
    
            &.selected {
                background-image: linear-gradient(0deg, rgba(234,237,241,1) 0%, rgba(195,221,251,1) 100%) !important;
                border-color: white !important;
                overflow: visible !important;
    
                &::before {
                    content: '';
                    position: absolute;
                    top: -2px;
                    left: -2px;
                    height: calc(100% + 1px);
                    width: calc(100% + 2px);
    
                    border: 1px solid rgb(163,167,172);
                    border-bottom: 0;
                    border-radius: 3px 3px 0 0;
                }
            }
        }
    
        .toolbox-tabs-wrapper {
            margin-bottom: -1px !important;
        }
    
        .devtools-tab-label {
            margin: 0 6px !important;
        }
    }

    @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
        #toolbox-toolbar-mount {
            background-color: rgb(30,30,30) !important;
        }

        .devtools-tabbar-button {
            padding: 0 !important;
        }

        .devtools-tab,
        .devtools-tabbar-button {
            color: white !important;

            &:focus {
                background-color: transparent !important;
            }

            &:hover {
                background-color: rgb(65,65,65) !important;
            }

            &.selected,
            &.checked {
                color: black !important;
                background-color: white !important;
            }
        }

        .devtools-tab {
            cursor: pointer !important;
            min-height: 21px !important;
            height: 0 !important;
        }

        .devtools-tab-label {
            margin: 0 19px !important;
        }
    }
}
  
/* Tab contents */
@-moz-document url-prefix("chrome://devtools/content/") {
    .tabs-navigation {
        flex-direction: row-reverse !important;
    }

    .devtools-tab-line {
        display: none !important;
    }

    @supports not (-moz-bool-pref("BeautyFox.appearance.IE10")) {
        .tabs-navigation {
            background-color: rgb(240,240,240) !important;
            height: 34px !important;
        }
    
        .tabs-menu-item {
            position: relative !important;
            color: black !important;
            margin: 6px 4px !important;
            border-style: solid !important;
            border-width: 1px !important;
            border-color: transparent !important;
            min-width: fit-content !important;
            width: fit-content !important;
            
            &:before {
                content: '';
                position: absolute;
                left: -2px;
                top: -2px;
                height: calc(100% + 2px);
                width: calc(100% + 2px);
    
                pointer-events: none;
    
                border-style: solid;
                border-width: 1px;
                border-color: transparent;
            }
    
            &:hover {
                background-color: transparent !important;
            }
    
            &.is-active {
                border-top-color: rgb(160,160,160) !important;
                border-left-color: rgb(160,160,160) !important;
                border-right-color: rgb(227,227,227) !important;
                border-bottom-color: rgb(227,227,227) !important;
                
                background-color: white !important;
    
                &::before {
                    border-top-color: rgb(105,105,105,105);
                    border-left-color: rgb(105,105,105,105);
                    border-right-color: white;
                    border-bottom-color: white;
                }
    
                a {
                    transform: translateX(0) translateY(0);
                }
            }
    
            a {
                transform: translateX(-1px) translateY(-1px);
                padding: 0 !important;
                margin: 0 5px !important;
                min-width: 34px !important;
                justify-content: start !important;
                text-align: left !important;
            }
        }
    
        .devtools-tab-line {
            display: none !important;
        }
    }

    @supports -moz-bool-pref("BeautyFox.appearance.IE10") {
        .tabs-navigation {
            height: 27px !important;
            border-bottom: 0 !important;
        }

        .tabs-menu-item {
            display: flex !important;
            align-items: center !important;

            &:hover {
                background-color: transparent !important;

                a {
                    color: rgb(0,122,204) !important;
                }
            }

            &.is-active {
                a {
                    color: rgb(0,122,204) !important;
                    font-weight: bold !important;
                }
            }

            a {
                padding: 0 20px !important;
            }
        }
    }
}