/*!
 * Copyright (c) 2014-present Cliqz GmbH. All rights reserved.
 *
 * This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 */

$inactive-tab-color: #D1D1D1;
$tab-min-height: 30px;
$chrome-light-color: #f2f2f2;
$chrome-dark-color: #464646;

:root {
    /* Override global variables */
    --tab-toolbar-navbar-overlap: 0; // Remove 1px margin bottom for new tab button

    /* Override dark theme variables */
    &:-moz-lwtheme {
        --chrome-secondary-background-color: #{$chrome-dark-color}; // Background for nav-bar
        --lwt-toolbar-field-background-color: #{$chrome-dark-color}; // Background for urlba
    }

    /* Override light theme variables */
    &:-moz-lwtheme-darktext {
        --toolbox-border-bottom-color: #{$chrome-light-color};
        --chrome-secondary-background-color: #{$chrome-light-color}; // Background for nav-bar
        --lwt-toolbar-field-background-color: #{$chrome-light-color}; // Background for urlbar
    }

    /* Style back button the same way as other toolbar buttons (remove border and border radius) */
    &:not([uidensity="compact"]) #back-button {
        // padding: 0 var(--toolbarbutton-outer-padding);

        & > .toolbarbutton-icon {
            background-color: unset;
            border: unset;
            border-radius: var(--toolbarbutton-border-radius);
            padding: var(--toolbarbutton-inner-padding);
            width: calc(2 * var(--toolbarbutton-inner-padding) + 16px);
            height: 28px; /* Make height of nav-bar 30 instead of 34 */
        }

        &:hover:not([disabled]):not([open]) > .toolbarbutton-icon {
            background-color: var(--toolbarbutton-hover-background) !important;
            box-shadow: unset;
        }
    }

    /* Customize hover background on newtab and all-tabs button */
    &:not([uidensity="touch"]) {
        .tabs-newtab-button, #new-tab-button {
            &:hover, &[open="true"] {
                .toolbarbutton-icon {
                    margin-left: 3px;
                    margin-right: 3px;
                    padding: 3px;
                    width: 22px;
                    height: 22px;
                }
            }
        }

        #alltabs-button {
            & {
                .toolbarbutton-badge-stack {
                    padding: 0;
                }

                .toolbarbutton-icon {
                    margin-left: 3px;
                    margin-right: 3px;
                    padding: 3px 0;
                    width: 22px;
                    height: 22px;
                }
            }
        }
    }

    &[uidensity="touch"] {
        #navigator-toolbox {
            /* TABS TOOLBAR */
            #TabsToolbar {
                #tabbrowser-tabs {
                    .tabbrowser-tab:not([pinned="true"]) {
                        /* Always show close tab button on touch density */
                        .tab-content {
                            .tab-close-button {
                                display: unset;
                            }
                        }
                    }
                }
            }

            #back-button > .toolbarbutton-icon {
                height: 34px;
            }

            #nav-bar #nav-bar-customization-target > *:first-child {
                padding-inline-start: 5px !important;
            }

            #urlbar, .searchbar-textbox {
                min-height: 36px;
            }
        }
    }
}

#main-window {
    &:-moz-lwtheme {
        background-color: $chrome-dark-color !important;
    }
    &:-moz-lwtheme-darktext {
        background-color: $inactive-tab-color !important;
    }
}

#navigator-toolbox {
    /* TABS TOOLBAR */
    #TabsToolbar {
        /* Customize tabs toolbar background color for light theme */
        &:-moz-lwtheme-darktext {
            -moz-appearance: none;
            background-color: #{$inactive-tab-color};
        }


        /* Remove the right border of the placehodler and replace by the first tab border(below) */
        .titlebar-placeholder[type="pre-tabs"] {
            border-inline-end-width: 0;
        }

        /* Remove 1px margin bottom on the newtab-button */
        .toolbarbutton-1 {
            margin-bottom: 0;
        }

        #tabbrowser-tabs {

            .tabbrowser-tab {

                /* Remove the tab-line effect on top when hovering a tab */
                .tab-line {
                    height: unset;
                }

                /* Move tab content 1px up :-) */
                .tab-content {

                    .tab-throbber,
                    .tab-throbber-fallback,
                    .tab-icon-image,
                    .tab-sharing-icon-overlay,
                    .tab-icon-sound,
                    .tab-close-button {
                        margin-top: 0;
                    }

                    .tab-label {
                        margin-top: 0;
                    }

                    .tab-close-button {
                        display: none;
                    }
                }

                .tab-background {
                    transition: background-color ease 150ms;
                }

                /* Add left border for the first tab (normal/pinned) and make sure to hide it in full screen */
                &:first-of-type { // [first-tab="true"], [first-visible-tab="true"]

                    &:-moz-lwtheme {
                        border-left: 0.5px solid rgba(255, 255, 255, 0.2);
                    }

                    &:-moz-lwtheme-darktext {
                        border-left: 0.5px solid rgba(0, 0, 0, 0.2);
                    }

                    &[visuallyselected="true"] {
                        border-left-color: rgba(0, 0, 0, 0.015);
                    }
                }

                /* Make the tabs' border thinner on retina */
                &:after, &:before {
                    opacity: 0.2;
                    border-left-width: 0.5px;
                }

                // Don't show close button on hover or when tab is pinned
                &:hover, &[visuallyselected="true"] {
                    &:not([pinned="true"]) {
                        .tab-content {
                            .tab-close-button {
                                display: unset;
                            }
                        }
                    }
                }

                &[visuallyselected="true"] {
                    &:-moz-lwtheme {
                        .tab-content {
                            background-color: #{$chrome-dark-color};
                        }
                    }

                    &:-moz-lwtheme-darktext {
                        .tab-content {
                            background-color: unset;
                        }
                    }
                }
            }

            .tabs-newtab-button {
                margin-left: 2px; // Align the last tab with the urlbar (2)
            }
        }

        /* Remove the first tab's left border in full screen */
        &[inFullscreen] {

            #tabbrowser-tabs .tabbrowser-tab:first-of-type {
                border-left: none;
            }
        }
    }

    /* NAVIGATION TOOLBAR */
    #nav-bar {
        border-top: unset !important; // Remove the line ontop of nav-bar
        /* Apply margin for all nav-bar's toolbar buttons/items, and the first button as well */
        #nav-bar-customization-target {

            .toolbarbutton-1 {
                padding: 0 4px;
            }

            & > *:first-child {
                padding-inline-start: 10px !important;
            }
        }

        #urlbar-container {
            margin: 0 1px; // Align the first tab with the urlbar (2)

            /* Remove border and border radius of url bar */
            #urlbar {
                border: unset;
                border-radius: unset;
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                // Transition delay to prevent flashing when changing mouse over between url and tabsbar
                transition: background-color cubic-bezier(.43,-0.01,.26,1.01) 60ms;
                transition-delay: 60ms;
                max-width: 100%;
                margin: 0px 0px;

                /* Add 1px margin for page action buttons */
                #page-action-buttons {
                    margin-right: 1px;
                }

                &:-moz-lwtheme {
                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
                    /* Change box-shadow and background color when focused and hovering */
                    &:hover, &[focused="true"] {
                        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
                        background-color: #585858;
                    }
                    &[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
                        color: #058B00;
                    }
                }

                &:-moz-lwtheme-darktext {
                    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
                    /* Change box-shadow and background color when focused and hovering */
                    &:hover, &[focused="true"] {
                        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
                        background-color: #fff;
                    }

                    &[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
                        color: #000;
                    }
                }
            }
        }
    }

    /* Line on the bottom of the nav-bar/toolbar */
    #PersonalToolbar {
        border-top: 1px solid #e1e1e1;
        box-shadow: rgba(0, 0, 0, 0.19) 0 1px 1px 0;
        border-bottom: unset;
        -moz-box-ordinal-group: 101;

        &[brighttext="true"] {
            border-top-color: #626262;
        }
    }

    &:after {
        box-shadow: rgba(0, 0, 0, 0.19) 0 -2px 1px 3px;
        border-bottom: unset;
        -moz-appearance: unset;
        height: unset;
    }

    &:-moz-window-inactive:after {
        box-shadow: rgba(0, 0, 0, 0.19) 0 -2px 1px 3px;
    }

    /* Forget mode urlbar */
    &[on_private_tab="true"] #nav-bar #urlbar-container #urlbar {
        /* Change box-shadow and background color when focused and hovering */
        &:hover, &[focused="true"] {
            background-color: lighten(#BBC6D4, 5%);
        }

        &:-moz-lwtheme {
            color: #000;
        }
    }
}

@mixin browser-theme($base-color) {
    /* Override light theme variables */
    &:-moz-lwtheme-darktext, &:-moz-lwtheme {
        --chrome-background-color: #{$base-color}; // Background for menu toolbar (Windows only)
    }

    #navigator-toolbox, #navigator-toolbox #TabsToolbar,
    .tabbrowser-tab .tab-content {
        background-color: #{$base-color};
    }

    #navigator-toolbox #TabsToolbar #tabbrowser-tabs .tabbrowser-tab {

      &:first-of-type { // [first-tab="true"], [first-visible-tab="true"]
        // Override the left line of the first tab to be black on dark & blue theme
        &:-moz-lwtheme {
          border-left: 0.5px solid rgba(0, 0, 0, 0.2);
        }
      }

      // On blue theme force lines between tabs
      &:after {
        opacity: 1;
        border-left-color: darken($base-color, 10%);
      }

      &[visuallyselected="true"] {
        border-top: 0;

        &:-moz-lwtheme {
          .tab-content {
            background-color: unset;
          }
        }

        &:-moz-lwtheme-darktext {
          .tab-content {
            background-color: #{$chrome-light-color};
          }
        }
      }

      &:hover:not([visuallyselected="true"]) .tab-content {
        background-color: darken($base-color, 5%);
        transition: background-color ease 150ms;
      }

      .tab-label-container:not([selected="true"]) {
        opacity: 1;

        .tab-label:not([selected="true"]) {
          color: #fff;
          opacity: 1;
        }
      }

      &:not([visuallyselected="true"]) {

        .tab-close-button:hover {

          .toolbarbutton-icon {
            background-color: darken($base-color, 15%);
          }

          &:-moz-lwtheme {
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 2px;
          }

          &:-moz-lwtheme-darktext {
            background-color: unset;
            border-radius: unset;
          }
        }

        .toolbarbutton-icon {
          --toolbarbutton-icon-fill-opacity: 1;
          fill:  #fff;
          stroke-opacity: 1;
        }
      }
    }

    .tabs-newtab-button,
    #new-tab-button {
      --toolbarbutton-icon-fill-opacity: 0.75;
      fill: #fff;

      &:hover {
        --toolbarbutton-icon-fill-opacity: 1;
      }
    }
  }
