@import url("lib/contextmenu/contextmenu.css");

:root {
    --tab-background-normal: hsl(0, 0%, 99%);
    --tab-background-pinned: hsla(0, 0%, 80%, .15);
    --tab-background-active: hsl(0, 0%, 87%);
    --tab-background-hover: hsla(0, 0%, 80%, .25);
    --tab-border-color: hsla(0, 0%, 0%, 0.06);
    --default-tab-line-color: #1aa1ff;
    --searchbox-background: #fff;
    --primary-text-color: #18191a;
    --icons-fill-color: #5a5b5c;
    --close-button-hover: hsla(0, 0%, 0%, 0.16);
    --close-button-active: hsla(0, 0%, 0%, 0.2);
    --menu-background: hsl(0, 0%, 99%);
    --menu-button-text-shadow: 0 1px rgba(255, 255, 255, .4);
    --menu-button-hover: hsla(240, 5%, 5%, .1);
    --menu-button-active: hsla(240, 5%, 5%, .15);
    --border-radius: 4px;
}

body[platform="win"] {
    --border-radius: 2px;
}

html, body {
    height: 100%;
}

body {
    background-color: var(--tab-background-normal);
    font: message-box;
    color: var(--primary-text-color);
    display: flex;
    flex-direction: column;
}

#spacer {
    flex: 1;
}

#topmenu {
    display: flex;
    padding: 6px 4px;
    height: 35px;
    border-bottom: 1px solid hsla(0, 0%, 0%, 0.2);
    background-color: var(--menu-background);
}

#newtab {
    margin: 0 4px;
    box-sizing: border-box;
    display: flex;
    flex: 0 20 auto;
    min-width: 26px;
    align-items: center;
    padding: 2px 4px;
    text-shadow: var(--menu-button-text-shadow);
}

canvas {
    display: none;
}

/* This is important for event bubbling: when we click a tab, e.target
   will be the tab, and not one of its child elements */
img, .tab *:not(.clickable) {
    pointer-events: none;
}

#newtab-label {
    margin-left: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 190px) {
    #newtab-label {
        display: none;
    }
}

#newtab-menu {
    display: flex;
    z-index: 2;
    position: absolute;
    top: 36px;
    left: 3px;
    padding-bottom: 5px;
    flex-direction: column;
    background: linear-gradient(hsla(0,0%,99%,1), hsla(0,0%,99%,.975) 10%, hsla(0,0%,98%,.975));
    box-shadow: 0 3px 5px hsla(210,4%,10%,.1),
                0 0 7px hsla(210,4%,10%,.1);
    border: 1px solid ThreeDShadow;
}

body[platform="mac"] #newtab-menu {
    border-radius: 3.5px;
}

#newtab-menu::before {
    content: "";
    background-image: url("img/panelarrow-vertical-themed.svg");
    width: 20px;
    height: 10px;
    background-size: contain;
    position: relative;
    top: -10px;
    left: 9px;
}

.newtab-menu-identity:hover {
    background-color: hsla(210,4%,10%,.07);
}

.newtab-menu-identity:hover:active {
    background-color: hsla(210,4%,10%,.12);
    box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
}

.newtab-menu-identity:first-child {
    margin-top: -5px;
}

.newtab-menu-identity {
    display: flex;
    align-items: center;
    padding: 7px 0 7px 18px;
}

.newtab-menu-identity-label {
    pointer-events: none;
    padding-left: 6px;
    padding-right: 16px;
}

[data-identity-color="blue"] {
    --identity-tab-color: #0996f8;
    --identity-icon-color: #00a7e0;
}

[data-identity-color="turquoise"] {
    --identity-tab-color: #01bdad;
    --identity-icon-color: #01bdad;
}

[data-identity-color="green"] {
    --identity-tab-color: #57bd35;
    --identity-icon-color:  #7dc14c;
}

[data-identity-color="yellow"] {
    --identity-tab-color: #ffcb00;
    --identity-icon-color: #ffcb00;
}

[data-identity-color="orange"] {
    --identity-tab-color: #ff9216;
    --identity-icon-color: #ff9216;
}

[data-identity-color="red"] {
    --identity-tab-color: #d92215;
    --identity-icon-color: #d92215;
}

[data-identity-color="pink"] {
    --identity-tab-color: #ea385e;
    --identity-icon-color: #ee5195;
}

[data-identity-color="purple"] {
    --identity-tab-color: #7a2f7a;
    --identity-icon-color: #7a2f7a;
}

[data-identity-icon="fingerprint"] {
    --identity-icon: url("img/usercontext.svg#fingerprint");
}

[data-identity-icon="briefcase"] {
    --identity-icon: url("img/usercontext.svg#briefcase");
}

[data-identity-icon="dollar"] {
    --identity-icon: url("img/usercontext.svg#dollar");
}

[data-identity-icon="cart"] {
    --identity-icon: url("img/usercontext.svg#cart");
}

[data-identity-icon="circle"] {
    --identity-icon: url("img/usercontext.svg#circle");
}

[data-identity-icon="gift"] {
    --identity-icon: url("img/usercontext.svg#gift");
}

[data-identity-icon="vacation"] {
    --identity-icon: url("img/usercontext.svg#vacation");
}

[data-identity-icon="food"] {
    --identity-icon: url("img/usercontext.svg#food");
}

[data-identity-icon="fruit"] {
    --identity-icon: url("img/usercontext.svg#fruit");
}

[data-identity-icon="pet"] {
    --identity-icon: url("img/usercontext.svg#pet");
}

[data-identity-icon="tree"] {
    --identity-icon: url("img/usercontext.svg#tree");
}

[data-identity-icon="chill"] {
    --identity-icon: url("img/usercontext.svg#chill");
}

.newtab-menu-identity-icon {
    pointer-events: none;
    width: 16px;
    height: 16px;
    background-image: var(--identity-icon);
    -moz-context-properties: fill;
    fill: var(--identity-icon-color);
    filter: url("img/filters.svg#fill");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.topmenu-button {
    border: 1px solid transparent; /* When we show a border on hover it won't move */
    border-radius: var(--border-radius);
}

#newtab.menuopened,
.topmenu-button:hover {
    background-color: var(--menu-button-hover);
}

.topmenu-button:hover:active {
    background-color: var(--menu-button-active);
}

#newtab-icon {
    min-width: 16px;
    min-height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/glyph-new-16.svg#standard");
    -moz-context-properties: fill;
    fill: var(--icons-fill-color);
    filter: url("img/filters.svg#fill");
}

#searchbox {
    background-color: var(--searchbox-background);
    display: flex;
    margin: 0 4px;
    padding: 1px;
    flex: 20 0 auto;
    min-width: 45px;
    border-radius: var(--border-radius);
    border: 1px solid hsla(240,5%,5%,.25);
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: border-color 0.1s, box-shadow 0.1s;
    cursor: text;
}

body[platform="win"] #searchbox {
    border-radius: 0;
}

#searchbox:hover {
    border-color: hsla(240,5%,5%,.35);
    box-shadow: 0 1px 6px rgba(0,0,0,.1);
}

#searchbox.focused {
    border: 1px solid Highlight;
}

body[platform="mac"] #searchbox.focused {
    border: 1px solid -moz-mac-focusring;
    box-shadow: 0 0 0 1px -moz-mac-focusring inset, 0 0 0 1px -moz-mac-focusring;
}

#searchbox-icon {
    min-width: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/find-icon.svg");
    -moz-context-properties: fill;
    fill: var(--icons-fill-color);
    filter: url("img/filters.svg#fill");
    border-radius: var(--border-radius) 0 0 var(--border-radius);
}

#searchbox-input {
    flex: 1;
    font: inherit; /* needed for windows */
    padding: 0;
    box-shadow: none;
    border: 0;
    border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

body[platform="mac"] #searchbox-input {
    font-size: 12px;
}

body[platform="win"] #searchbox-input:placeholder-shown {
    font-style: italic;
}

#searchbox-input {
    background-color: var(--searchbox-background);
    color: var(--searchbox-text-color);
}

#settings {
    flex-shrink: 0;
    min-width: 18px;
    padding: 0 12px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url("img/settings.svg#standard");
    -moz-context-properties: fill;
    fill: var(--icons-fill-color);
    filter: url("img/filters.svg#fill");
}

#tablist {
    display: flex;
    flex-direction: column;
}

.tab {
    flex-shrink: 0;
}

#tablist-wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

#tablist,
#pinnedtablist:not(.compact) {
    overflow-x: hidden;
}

#pinnedtablist:not(.compact) .tab,
.tab:not(.pinned) {
    display: flex;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid var(--tab-border-color);
    position: relative;
}

#pinnedtablist.compact:not(:empty) {
    border-bottom: 1px solid var(--tab-border-color);
}

#topshadow {
    flex-shrink: 0;
    position: relative;
    width: 100%;
    height: 10px;
    margin-bottom: -10px;
    z-index: 1;
    pointer-events: none;
    transition: box-shadow 0.3s cubic-bezier(.07,.95,0,1);
}

#tablist-wrapper.scrolled #topshadow {
    box-shadow: inset 0px 10px 10px -10px rgba(0, 0, 0, 0.3);
}

.tab.active {
    background-color: var(--tab-background-active);
    color: var(--tab-text-color-active, var(--primary-text-color));
}

.tab:not(.active):hover {
    background-color: var(--tab-background-hover);
}

.tab-loading-burst {
    position: absolute;
    overflow: hidden;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

.tab-loading-burst::before {
    position: absolute;
    content: "";
    /* We set the width to be a percentage of the tab's width so that we can use
       the `scale` transform to scale it up to the full size of the tab when the
       burst occurs. We also need to set margin-top/margin-left so that the
       center of the burst matches the center of the favicon. */
    width: 5%;
    height: 100%;
    margin-left: 17px;
    margin-top: 10px;
}

#tablist-wrapper.shrinked .tab-loading-burst::before {
    margin-left: 10px;
    margin-top: 0px;
}

.tab-loading-burst.bursting::before {
    background-image: url("img/loading-burst.svg#standard");
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
}

.tab-loading-burst.bursting[notselectedsinceload]::before {
    animation-name: tab-burst-animation-light;
}

.tab:not(.active) .tab-loading-burst.bursting::before {
    background-image: url("img/loading-burst.svg#light");
}

@keyframes tab-burst-animation {
    0% {
        opacity: 0.4;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(40);
    }
}

@keyframes tab-burst-animation-light {
    0% {
        opacity: 0.2;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(40);
    }
}

.tab:not(.hasContext) {
    --identity-tab-color: var(--default-tab-line-color);
}

.tab-context {
    min-width: 6px;
    height: 100%;
    background-image:
        linear-gradient(to right, hsla(0, 0%, 0%, 0.25) 17%, hsla(0, 0%, 0%, 0.1) 17%, transparent 67%),
        linear-gradient(to right, var(--identity-tab-color), var(--identity-tab-color));
    background-position: 0 0;
    background-repeat: no-repeat;
    transition: background-position 150ms ease-out;
}

.tab.hasContext:not(.active) > .tab-context {
    background-position: -3px 0;
}

.tab:not(.hasContext):not(.active) > .tab-context {
    background-position: -6px 0;
}

#pinnedtablist.compact .tab.pinned.hasContext > .tab-context {
    /* Specify all these at once also overrides the gradient background,
     * Which looks wrong since these are vertical (we could define a
     * vertical background, but they're 2px high so it doesn't matter).
     * Note that this also (intentionally) overrides background-position
     * set by `.tab:not(.active)` with `0 0`.
     */
    background: var(--identity-tab-color) no-repeat 0 0;
    height: 2px;
    width: 20px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.tab-icon-overlay {
    display: none;
    z-index: 1;
    position: relative;
    width: 16px;
    height: 16px;
    margin-left: -16px;
    left: 16px;
    top: -19px;
    border-radius: 50%;
    background-color: white;
    background-size: contain;
    background-clip: padding-box;
    border: 1px solid hsla(0, 0%, 0%, 0.2);
    box-shadow: 0 1px 0 hsla(0, 0%, 0%, 0.5);
}

#tablist-wrapper.shrinked .tab-icon-overlay {
    width: 13px;
    height: 13px;
    margin: 0 0 -13px -13px;
    left: auto;
    top: auto;
    bottom: 0px;
    right: -22px;
}

.tab-icon-overlay.sound {
    display: block;
    background-image: url("img/tab-audio-small.svg#tab-audio");
}

.tab-icon-overlay.muted {
    display: block;
    background-image: url("img/tab-audio-small.svg#tab-audio-muted");
}

#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image  {
    margin: 6px;
    min-width: 54px;
    height: 40px;
    border: 0;
    background-image: url("img/thumbnail-blank.svg");
    background-size: contain;
    background-color: white;
    background-repeat: no-repeat;
    box-shadow: 0 0 2px 2px hsla(0, 0%, 0%, 0.02), 0 2px 0 hsla(0, 0%, 0%, 0.05), 0 0 0 1px hsla(0, 0%, 0%, 0.2);
}

#tablist-wrapper.shrinked #tablist .tab-meta-image,
#tablist-wrapper.shrinked #pinnedtablist:not(.compact) .tab-meta-image {
    background: none !important; /* Because the JS script sets it manually */
    /* Make it the same size as the favicon it contains */
    height: 20px;
    width: 20px;
}

#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image.has-thumbnail,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image.has-thumbnail {
    border: 2px solid white;
}

#tablist-wrapper:not(.shrinked) #tablist .tab-meta-image.has-thumbnail > .tab-icon-wrapper,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-meta-image.has-thumbnail > .tab-icon-wrapper {
    margin-left: -2px;
    margin-top: 18px;
}

.tab-icon-wrapper {
    height: 20px;
    width: 20px;
    padding: 2px;
}

#tablist-wrapper:not(.shrinked) #tablist .tab-icon-wrapper,
#tablist-wrapper:not(.shrinked) #pinnedtablist:not(.compact) .tab-icon-wrapper {
    margin-left: 0px;
    margin-top: 20px;
    border-radius: var(--border-radius);
    background-color: white;
    box-shadow: 0 0 2px hsla(0, 0%, 0%, 0.08), 0 0 0 1px hsla(0, 0%, 0%, 0.08);
}

.tab-icon {
    width: 16px;
    height: 16px;
    background-image: url("img/defaultFavicon.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-origin: content-box;
    image-rendering: pixelated;
}

.tab-icon.chrome-icon {
    -moz-context-properties: fill;
    fill: var(--icons-fill-color);
    filter: url("img/filters.svg#fill");
}

#tablist-wrapper:not(.shrinked) #tablist .tab-icon.chrome-icon,
#pinnedtablist:not(.compact) .tab-icon.chrome-icon {
    fill: #5a5b5c;
}

.tab.loading .tab-icon {
    position: relative;
    overflow: hidden;
    background-image: none !important;
}

.tab.loading .tab-icon::before {
    content: "";
    position: absolute;
    background-image: url("img/loading-spinner.svg#standard");
    background-position: left center;
    background-repeat: no-repeat;
    width: 960px;
    height: 100%;
    animation: tab-throbber-animation 1.05s steps(60) infinite;
    -moz-context-properties: fill;

    /* XXX: It would be nice to transition between the "connecting" color and the
     "loading" color (see the `.tab-throbber[progress]::before` rule below);
     however, that currently forces main thread painting. When this is fixed
     (after WebRender lands), we can do something like
     `transition: fill 0.333s, opacity 0.333s;` */

    fill: currentColor;
    opacity: 0.7;
}

@keyframes tab-throbber-animation {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

@keyframes tab-throbber-animation-rtl {
    0% { transform: translateX(0); }
    100% { transform: translateX(100%); }
}

.tab-title-wrapper {
    flex: 1;
    display: flex;
    min-width: 0;
    flex-direction: column;
}

#tablist-wrapper.shrinked .tab-title-wrapper {
    margin-left: 6px;
}

.tab.discarded .tab-title {
    opacity: 0.5;
}

.tab.discarded .tab-meta-image {
  opacity: 0.45;
}

.tab-title, .tab-host {
    white-space: nowrap;
    overflow: hidden;
}

.tab-host {
    opacity: 0.5;
}

#tablist-wrapper.shrinked .tab-host {
    display: none;
}

.tab-title-wrapper {
    mask-image: linear-gradient(to left, transparent 0, black 2em);
}

.tab:hover:not(.pinned) > .tab-title-wrapper {
    mask-image: linear-gradient(to left, transparent 28px, black calc(2em + 28px));
}

.tab-pin {
    display: none;
}

#pinnedtablist:not(.compact) .tab.pinned .tab-pin {
    min-width: 16px;
    height: 16px;
    margin-right: 12px;
    display: block;
    background-image: url("img/glyph-pin-pinned-12.svg#standard");
    -moz-context-properties: fill;
    fill: var(--icons-fill-color);
    filter: url("img/filters.svg#fill");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 12px;
    z-index: 0;
}

.tab-close {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    top: 0;
    bottom: 0;
    right: 6px;
    margin: auto;
    background-image: url("img/close-icon.svg");
    -moz-context-properties: fill;
    fill: var(--icons-fill-color);
    filter: url("img/filters.svg#fill");
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--border-radius);
    opacity: 0;
}

.tab:hover > .tab-close {
    opacity: 1;
}

.tab-close:hover {
    background-color: var(--close-button-hover) !important;
}
.tab-close:hover:active {
    background-color: var(--close-button-active) !important;
}

#tablist-wrapper.shrinked #tablist .tab,
#tablist-wrapper.shrinked #pinnedtablist:not(.compact) .tab {
    height: 35px;
}

.tab.pinned .tab-loading-burst::before {
    margin-left: 12px;
    margin-top: 0px;
}

#tablist-wrapper #pinnedtablist {
    background-color: var(--tab-background-pinned);
    flex-shrink: 0;
}

#tablist-wrapper #pinnedtablist.compact {
    display: flex;
    flex-wrap: wrap;
}

#pinnedtablist:empty {
    display: none;
}

#pinnedtablist.compact .tab.pinned {
    position: relative;
    padding: 4px;
}

#pinnedtablist.compact .tab.pinned > .tab-icon-overlay {
    width: 13px;
    height: 13px;
    margin: 0 0 -13px 0;
    left: auto;
    top: auto;
    bottom: -12px;
    right: -11px;
}

#pinnedtablist.compact .tab.pinned > .tab-meta-image {
    background-image: none !important; /* Because the JS script sets it manually */
    display: flex;
    justify-content: center;
    align-items: center;
}

#pinnedtablist.compact .tab.pinned .tab-icon-wrapper {
    height: 24px;
    width: 24px;
}

#pinnedtablist.compact .tab.pinned .tab-icon {
    margin: 2px;
}

#pinnedtablist.compact .tab.pinned:not(.loading) .tab-icon {
    width: 16px;
    height: 16px;
}

#pinnedtablist.compact .tab.pinned:not(.hasContext) > .tab-context,
#pinnedtablist.compact .tab.pinned > .tab-title-wrapper,
.tab.pinned > .tab-close {
    display: none;
}

#pinnedtablist .tab.pinned.wants-attention {
    background-image: url("img/tab-attention.svg");
    background-repeat: no-repeat;
}

#pinnedtablist.compact .tab.pinned.wants-attention {
    background-position: center bottom;
}

#pinnedtablist:not(.compact) .tab.pinned.wants-attention {
    background-position: left center;
}

#moretabs:not([hasMoreTabs]) {
    display: none;
}

#moretabs {
    display: flex;
    align-items: center;
    height: 36px;
    padding-left: 31px;
}

#moretabs:hover {
    background-color: hsla(0, 0%, 0%, 0.1);
}

.hidden {
    display: none !important;
}

/* DARK THEME CUSTOMIZATIONS */
body.dark-theme {
    --tab-background-normal: hsl(240, 4%, 5%);
    --tab-background-pinned: hsla(240, 4%, 20%, 0.15);
    --tab-background-active: hsl(240, 2%, 20%);
    --tab-background-hover: hsl(240, 5%, 30%, 0.25);
    --tab-border-color: #38383D;
    --searchbox-background: rgb(71, 71, 73);
    --primary-text-color: rgb(255, 255, 255);
    --icons-fill-color: #bebebe;
    --close-button-hover: rgba(238, 238, 241, .1);
    --close-button-active: rgba(238, 238, 241, .2);
    --menu-background: #323234;
    --menu-button-text-shadow: 0 1px rgba(0, 0, 0, .4);
    --menu-button-hover: hsla(240, 10%, 94%, 0.2);
    --menu-button-active: hsla(240, 10%, 94%, 0.3);
}

body.dark-theme #newtab-menu {
    color: black;
}
