/*==============================================================================================*

  +-----+-----+-----+-----+-----+-----+-----+
  | █▀▀ | ▄▀█ | █▀▀ | █▀▀ | ▄▀█ | █▀▄ | █▀▀ |
  | █▄▄ | █▀█ | ▄▄█ | █▄▄ | █▀█ | █▄▀ | ██▄ |
  +-----+-----+-----+-----+-----+-----+-----+

  Description:    Cascade is a minimalstic and keyboard centered custom theme removing a lot of the
                  subjective clutter default Firefox comes with. This theme is highly inspired by the
                  stylistic choices of SimpleFox by Miguel Ávila. 🦊
                  https://github.com/migueravila/SimpleFox

  Author:         Andreas Grafen
                  (https://andreas.grafen.info)

  Repository:     https://github.com/andreasgrafen/cascade
                  Thank you Nick, Abdallah, Benyamin and Wael for all the great suggestions for improvements! ♡

                  Nick:     https://github.com/nicksundermeyer
                  Abdallah: https://github.com/HeiWiper
                  Benyamin: https://github.com/benyaminl
                  Wael:     https://github.com/wael444

                  If you're looking for a **mouse-friendly** clone please check out Waterfall.
                  https://github.com/crambaud/waterfall

*==============================================================================================*/

@import "includes/cascade-config.css";
@import "includes/cascade-rose-pine.css";

@import "includes/cascade-layout.css";
@import "includes/cascade-responsive-windows-fix.css";
@import "includes/cascade-floating-panel.css";

@import "includes/cascade-nav-bar.css";
@import "includes/cascade-tabs.css";

:root {
    --uc-popup-border-colour: rgb(110, 106, 134);
    --uc-seperator-colour: rgb(57, 53, 82);
    --uc-tab-colour: rgb(33, 32, 46);

    /* popup panels */
    --arrowpanel-background: var(--uc-base-colour) !important;
    --arrowpanel-border-color: var(--uc-popup-border-colour) !important;
    --arrowpanel-color: var(--uc-inverted-colour) !important;
    --arrowpanel-dimmed: var(--uc-muted-colour) !important;

    /* input field */
    --input-bgcolor: var(--toolbar-field-background-color) !important;
    --input-color: var(--toolbar-field-color) !important;
    --input-border-color: var(--toolbar-field-border-color) !important;

    /* buttons - checkbox, etc */
    --button-primary-bgcolor: var(--uc-accent-colour) !important;
    --button-primary-hover-bgcolor: var(--uc-accent-colour) !important;
    --button-primary-active-bgcolor: var(--uc-accent-colour) !important;
    --button-primary-color: var(--uc-base-colour) !important;
    --button-bgcolor: var(--uc-base-colour) !important;
    --button-hover-bgcolor: var(--uc-highlight-colour) !important;
    --button-active-bgcolor: var(--uc-muted-colour) !important;
    --toolbarbutton-icon-fill: var(--uc-muted-colour) !important;
    --urlbar-box-active-bgcolor: var(--uc-accent-colour) !important;
}

/* remove flashbang */
body,
html,
.browserContainer,
#mainPopupSet,
#main-window,
#tabbrowser-tabbox,
#tabbrowser-tabpanels {
    background-color: var(--uc-base-colour) !important;
}

#navigator-toolbox {
    /* add padding to main bar */
    padding: 3px !important;
}

#identity-icon-label {
    display: none !important;
}

/* center url text */
#urlbar-input {
    text-align: center !important;
}

/* prevent url bar from clipping */
#urlbar-container {
    width: fit-content !important;
}

/* hide back & forward buttons */
#back-button {
    display: flex !important;
    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    opacity: 1 !important;
    transition: all 0.2s ease !important;
}
#back-button[disabled="true"] {
    width: 0 !important;
    opacity: 0 !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

/* show extension button on hover */
#unified-extensions-button:hover .toolbarbutton-icon,
#unified-extensions-button[open="true"] .toolbarbutton-icon {
    width: calc(2 * var(--toolbarbutton-inner-padding) + 16px) !important;
    padding: var(--toolbarbutton-inner-padding) !important;
}
#unified-extensions-button .toolbarbutton-icon {
    width: 0 !important;
    padding: 1px !important;
    transition: all 0.2s ease !important;
}

/* url bar colors */
.urlbarView-row[selected],
.urlbarView-row[row-selectable]:not([selected]):hover {
    background-color: var(--uc-highlight-colour) !important;
}
#urlbar[open] > .urlbarView > .urlbarView-body-outer > .urlbarView-body-inner,
.urlbarView:not([noresults]) > .search-one-offs:not([hidden]) {
    border-top: 1px solid var(--uc-seperator-colour) !important;
}
#urlbar[open] > #urlbar-background {
    border: 1px solid var(--arrowpanel-border-color) !important;
}

/* active tab color fix */
.tab-background:is([selected], [multiselected]) {
    background-color: var(--uc-tab-colour) !important;
}
.tabbrowser-tab:where([visuallyselected]) .tab-text.tab-label {
    color: var(--uc-inverted-colour) !important;
}

/* inactive tabs */
.tabbrowser-tab[fadein]:not([selected]):not([pinned]) .tab-icon-image {
    filter: contrast(0.25) opacity(0.25);
}
.tabbrowser-tab:not([visuallyselected="true"], [multiselected]) {
    color: var(--uc-muted-colour) !important;
}

/* private browsing indicator */
.private-browsing-indicator-icon {
    opacity: 0.75 !important;
    width: 20px !important;
    height: 20px !important;
}
[data-l10n-id="private-browsing-indicator-label"] {
    display: none !important;
}

/* sidebar */
#sidebar-header {
    border-bottom: none !important;
    --sidebar-text-color: var(--uc-inverted-colour) !important;
    color: var(--uc-inverted-colour) !important;
    --sidebar-background-color: var(--uc-base-colour) !important;
    background-color: var(--uc-base-colour) !important;
}
.sidebar-splitter {
    border: none !important;
}
#search-box {
    appearance: none !important;
    background-color: var(--toolbar-field-background-color) !important;
    color: var(--toolbar-field-color) !important;
    border: 2px solid var(--uc-seperator-colour) !important;
    border-radius: 3px !important;
}
#search-box:hover {
    border: 2px solid var(--uc-accent-colour) !important;
    border-radius: 3px !important;
}
#search-box:active {
    border: 2px solid var(--uc-highlight-colour) !important;
    border-radius: 3px !important;
}
#viewButton {
    appearance: none !important;
    background-color: var(--toolbar-field-background-color) !important;
    color: var(--toolbar-field-color) !important;
    border: 2px solid var(--uc-seperator-colour) !important;
    border-radius: 3px !important;
}
#viewButton:hover {
    border: 2px solid var(--uc-accent-colour) !important;
    border-radius: 3px !important;
}
#search-box:active {
    color: var(--uc-muted-colour) !important;
    border: 2px solid var(--uc-highlight-colour) !important;
    border-radius: 3px !important;
}
.sidebar-placesTreechildren::-moz-tree-cell-text() {
    color: var(--uc-inverted-colour) !important;
}
.sidebar-placesTreechildren::-moz-tree-cell() {
    background: var(--uc-base-colour) !important;
    margin: 0 3px !important;
    border-radius: 6px !important;
    border: 2px solid transparent !important;
}
.sidebar-placesTreechildren::-moz-tree-cell-text(hover) {
    color: var(--uc-accent-colour) !important;
}
.sidebar-placesTreechildren::-moz-tree-cell(hover) {
    background: var(--uc-highlight-colour) !important;
    border: 2px solid var(--uc-accent-colour) !important;
}
.sidebar-placesTreechildren::-moz-tree-cell(selected) {
    background: var(--uc-highlight-colour) !important;
}

/* findbar borders */
.browserContainer > findbar {
    border-top-color: transparent !important;
}

/* status panel */
#statuspanel #statuspanel-label {
    appearance: none !important;
    border: 1px solid var(--uc-seperator-colour) !important;
    background-color: var(--uc-highlight-colour) !important;
    color: var(--uc-inverted-colour) !important;
}

/* places or library window */
@-moz-document url(chrome://browser/content/places/places.xhtml)
{
    :root {
        --organizer-color: var(--uc-inverted-colour) !important;
        --organizer-deemphasized-color: var(--uc-muted-colour) !important;
        --organizer-toolbar-background: var(--uc-base-colour) !important;
        --organizer-pane-background: var(--uc-base-colour) !important;
        --organizer-content-background: var(--uc-base-colour) !important;
        --organizer-hover-background: var(--uc-highlight-colour) !important;
        --organizer-selected-background: var(--uc-highlight-colour) !important;
        --organizer-outline-color: var(--uc-seperator-colour) !important;
        --organizer-toolbar-field-background: var(--uc-base-colour) !important;
        --organizer-toolbar-field-background-focused: var(
            --uc-highlight-colour
        ) !important;
        --organizer-border-color: var(--uc-popup-border-colour) !important;
        --default-focusring: none !important;
        --scrollbar-color: var(--uc-seperator-colour) !important;
        --organizer-focus-selected-background: var(
            --uc-seperator-colour
        ) !important;
        --organizer-focus-selected-color: var(--uc-accent-colour) !important;
    }
    treechildren,
    richlistbox,
    richlistitem {
        border: 2px solid transparent !important;
        border-radius: 6px !important;
        padding: 4px !important;
        border-radius: 2px !important;
    }
    treechildren::-moz-tree-row(selected),
    richlistbox:where(:focus) > richlistitem[selected="true"],
    richlistitem[selected="true"] {
        background-color: var(--organizer-selected-background) !important;
        border-radius: 6px !important;
    }
    treechildren::-moz-tree-row(selected):hover,
    richlistbox:where(:focus) > richlistitem[selected="true"]:hover,
    richlistitem[selected="true"]:hover {
        background-color: var(--organizer-selected-background) !important;
        border-radius: 6px !important;
    }
    treechildren::-moz-tree-row(hover),
    richlistitem:hover {
        background-color: var(--organizer-hover-background) !important;
        border: 2px solid var(--organizer-focus-selected-color) !important;
        border-radius: 6px !important;
    }
    treechildren::-moz-tree-cell-text(selected),
    richlistbox:where(:focus) > richlistitem[selected="true"],
    richlistitem[selected="true"] {
        color: var(--organizer-focus-selected-color) !important;
    }
    treechildren::-moz-tree-cell-text(hover),
    richlistitem:hover {
        color: var(--organizer-focus-selected-color) !important;
    }
    #downloadsListBox:focus > richlistitem[selected] {
        background-image: none !important;
        background-clip: unset !important;
        border: 2px solid var(--organizer-focus-selected-color) !important;
        outline: none !important;
    }
    #placesView > splitter {
        border-inline-end: none !important;
    }
    treecol,
    treecolpicker {
        background-color: var(--organizer-content-background) !important;
    }
    treecol,
    .tree-columnpicker-button {
        border-inline-start: none !important;
    }
    #placeContent {
        padding: 4px !important;
        border-radius: 2px !important;
    }
    #contentView treecol {
        box-shadow: none !important;
    }
    #placesList {
        padding: 4px 0 !important;
    }
    #placesView {
        border-top: 0px solid var(--organizer-border-color) !important;
    }
    #placesToolbar {
        border-bottom: 0 !important;
    }
    /* #placesToolbar,
    #placesToolbox,
    #places {
        background-color: transparent !important;
        -moz-appearance: -moz-win-borderless-glass !important;
    } */
    #searchFilter {
        background-color: transparent !important;
    }
    #detailsPane {
        background-color: var(--organizer-content-background) !important;
        border-top: 1px solid var(--organizer-outline-color) !important;
    }
    #detailsPane input,
    .expander-up,
    .expander-down {
        border: 1px solid var(--organizer-outline-color) !important;
    }
}

#main-window {
    background-color: var(--uc-base-colour) !important;
    /* -moz-appearance: -moz-win-borderless-glass !important; */
}
#navigator-toolbox {
    background: transparent !important;
}

#input {
    background-color: var(--uc-base-colour) !important;
    border: 1px solid var(--organizer-outline-color) !important;
}

/* titlebar buttons */
.titlebar-buttonbox {
    height: 26px !important;
    margin-right: -4px !important;
}
.titlebar-button {
    content: "" !important;
    padding: 8px 23px !important;
    background-color: transparent !important;
    list-style-image: none !important;
}
.titlebar-button > .toolbarbutton-icon {
    display: none !important;
}
.titlebar-button::before {
    font-family: "Segoe Fluent Icons" !important;
    font-weight: bold !important;
    font-size: 6px !important;
    -webkit-text-stroke: 1px !important;
    color: transparent !important;
    background: var(--uc-caption-color, currentColor) !important;
    outline: 2px solid transparent !important;
    outline-offset: -1px !important;
    border-radius: 100% !important;
    height: 14px !important;
    width: 14px !important;
    position: absolute !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: 0.3s all !important;
}
.titlebar-button:hover::before {
    color: var(--uc-caption-color, currentColor) !important;
    background: var(--uc-caption-color-hover, currentColor) !important;
    outline: 2px solid var(--uc-caption-color, currentColor) !important;
}
.titlebar-button:active::before {
    color: transparent !important;
}
.titlebar-min::before {
    --uc-caption-color: rgb(246, 193, 119);
    --uc-caption-color-hover: rgba(246, 193, 119, 0.3);
}
.titlebar-max::before,
.titlebar-restore::before {
    --uc-caption-color: rgb(156, 207, 216);
    --uc-caption-color-hover: rgb(156, 207, 216, 0.3);
}
.titlebar-close::before {
    --uc-caption-color: rgb(235, 188, 186);
    --uc-caption-color-hover: rgba(235, 188, 186, 0.3);
}
.titlebar-min::before {
    content: "\f7af" !important;
}
.titlebar-max::before,
.titlebar-restore::before {
    content: "\ea3a" !important;
}
.titlebar-close::before {
    content: "\e711" !important;
}

/* context menu */
menupopup {
    --panel-border-radius: 6px !important;
    --panel-padding: 6px 3px !important;
    --panel-border-color: var(--uc-popup-border-colour) !important;
    --panel-background: var(--uc-base-colour) !important;
    --nested-margin: -10px !important;
}
menupopup,
panel {
    --panel-color: var(--uc-inverted-colour) !important;
    --panel-shadow: 0 6px var(--panel-shadow-margin) hsla(0, 0%, 0%, 0.2) !important;
    --panel-shadow-margin: 10px !important;
}
menuseparator::before {
    border-top: 1px solid var(--uc-seperator-colour) !important;
}
menu:where([_moz-menuactive="true"]:not([disabled="true"])),
menuitem:where([_moz-menuactive="true"]:not([disabled="true"])) {
    background-color: var(--uc-highlight-colour) !important;
    color: var(--uc-inverted-colour) !important;
    border-radius: 3px;
}
menu:where([disabled="true"]),
menuitem:where([disabled="true"]),
menu:where([_moz-menuactive="true"][disabled="true"]),
menuitem:where([_moz-menuactive="true"][disabled="true"]) {
    color: var(--uc-muted-colour) !important;
}
menu,
menuitem,
menucaption {
    appearance: none !important;
}
#context-navigation
    > .menuitem-iconic[_moz-menuactive="true"]
    > .menu-iconic-left
    > .menu-iconic-icon,
#context-navigation
    > .menuitem-iconic[_moz-menuactive="true"][disabled="true"]
    > .menu-iconic-left
    > .menu-iconic-icon {
    background-color: transparent !important;
}
menu:where([_moz-menuactive="true"][disabled="true"]),
menuitem:where([_moz-menuactive="true"][disabled="true"]) {
    background-color: var(--uc-base-colour) !important;
    border-radius: 3px;
}
