/* 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 http://mozilla.org/MPL/2.0/. */

/* ===== messenger.css ==================================================
  == Styles shared throughout the Messenger application.
  ======================================================================= */

@import url("chrome://global/skin/");
@import url("chrome://messenger/content/messenger.css");
@import url("chrome://messenger/skin/shared/messenger.css");

:root {
  --toolbarHighlight: rgba(255, 255, 255, 0.4);
  --fgTabTexture: linear-gradient(transparent, transparent 2px, var(--toolbarHighlight) 2px, var(--toolbarHighlight));
  --fgTabBackgroundColor: -moz-dialog;
  --fgTabTextureLWT: var(--fgTabTexture);

  /* Aero-only variables */
  --customToolbarColor: hsl(210, 75%, 92%);
}

toolbox:-moz-lwtheme {
  border-top-width: 0;
}

.toolbar-primary {
  border-top: none;
}

.menu-iconic > .menu-iconic-left,
.menuitem-iconic > .menu-iconic-left {
  display: -moz-box;
  padding-top: 0;
}

#tabbar-toolbar {
  border: none;
}

#tabbar-toolbar[customizing="true"] {
  min-width: 24px;
}

/* ::::: menubar ::::: */

#menubar-items {
  -moz-box-orient: vertical; /* for flex hack */
  margin-bottom: 1px;
}

#menubar-items > menubar {
  -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
}

/* ::::: toolbarbutton ::::: */

.toolbarbutton-1 {
  -moz-box-orient: vertical;
}

toolbox[labelalign="end"] .toolbarbutton-1,
toolbox[labelalign="end"] .toolbarbutton-1[type="menu-button"]
  > .toolbarbutton-menubutton-button {
  -moz-box-orient: horizontal;
}

.toolbarbutton-1,
.toolbarbutton-menubutton-button {
  padding-top: 5px;
  padding-bottom: 6px;
  padding-inline-start: 4px;
  padding-inline-end: 5px;
}

.toolbarbutton-1:hover:active:not([disabled]),
.toolbarbutton-1[open="true"],
.toolbarbutton-menubutton-button:hover:active:not([disabled]),
.toolbarbutton-menubutton-button[open="true"] {
  padding-top: 6px;
  padding-bottom: 5px;
  padding-inline-start: 5px;
  padding-inline-end: 4px;
}

.toolbarbutton-1[checked="true"] {
  padding: 1px 5px !important;
}

.toolbarbutton-1[disabled=true]:-moz-lwtheme,
.toolbarbutton-menubutton-button[disabled=true]:-moz-lwtheme {
  color: inherit;
  text-shadow: inherit;
}

.toolbarbutton-1[disabled=true]:-moz-lwtheme .toolbarbutton-text {
  opacity: .4;
}

toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1 .toolbarbutton-text {
  padding-inline-start: 2px;
}

toolbox[labelalign="end"] > toolbar[mode="full"] deck .toolbarbutton-text {
  text-align: start;
}

.toolbarbutton-1[type="menu"] {
  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu-vertical");
}

toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1[type="menu"] {
  -moz-binding: url("chrome://global/content/bindings/toolbarbutton.xml#menu");
}

.toolbarbutton-icon {
  margin-inline-end: 0;
}

/* Has to be !important to overrule toolkit's dropmarker.css for the
   dropmarker[disabled="true"] case. */
.toolbarbutton-menu-dropmarker {
  padding-inline-start: 3px !important;
}

toolbar[mode="full"] .toolbarbutton-1 {
  min-width: 55px;
}

sidebarheader .toolbarbutton-text:not([value]) {
  display: none;
}

#tabmail-buttons > toolbarbutton {
  margin-top: 3px;
  margin-bottom: 0;
}

menulist.folderMenuItem menu:not(.folderMenuItem) {
  padding-top: 3px;
  padding-bottom: 3px;
}

#PopupGlodaAutocomplete {
  -moz-appearance: none;
  margin-top: -1px;
  border-width: 1px;
  -moz-border-top-colors: ThreeDShadow;
  -moz-border-right-colors: ThreeDShadow;
  -moz-border-bottom-colors: ThreeDShadow;
  -moz-border-left-colors: ThreeDShadow;
  background-color: -moz-Field;
}

#status-bar:-moz-lwtheme {
  padding-bottom: 1px;
}

treechildren::-moz-tree-cell-text {
  padding-inline-start: 2px;
  padding-bottom: 2px;
}

@media not all and (-moz-windows-default-theme) {
  treechildren::-moz-tree-cell-text {
    padding-inline-start: 4px !important;
  }
}

/* ::::: Notifications ::::: */

notification[type="critical"] .messageCloseButton {
  list-style-image: url("chrome://global/skin/icons/close-inverted.png");
}

@media not all and (-moz-os-version: windows-xp) {
 @media (min-resolution: 1.1dppx) {
    notification[type="critical"] .messageCloseButton {
      list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png");
    }
  }
}

/* Give menupopup[type="folder"] a menu look */
menupopup[type="folder"] {
  -moz-appearance: menupopup;
  background-color: menu;
}

menupopup[type="folder"] menu[_moz-menuactive="true"],
menupopup[type="folder"] menuitem[_moz-menuactive="true"] {
  color: -moz-MenuHoverText;
  background-color: -moz-MenuHover;
}

menupopup[type="folder"] > menu,
menupopup[type="folder"] > menuitem {
  -moz-appearance: menuitem !important;
  padding-right: 0;
  padding-left: 0;
}

menulist.folderMenuItem > .menulist-label-box > .menulist-label {
  margin-inline-start: 2px !important;
}

button[type="menu-button"] {
  margin: 1px 5px 2px 5px;
}

button[type="menu-button"] > button {
  margin: -3px;
  margin-inline-end: 0;
}

@media (-moz-windows-default-theme: 0) {
  button[type="menu-button"] > button {
    margin: -2px;
  }
}

@media (-moz-os-version: windows-xp) {
  #tabmail:not(:-moz-lwtheme) {
    background-color: ActiveCaption;
  }

  #tabmail:not(:-moz-lwtheme):-moz-window-inactive {
    background-color: InactiveCaption;
  }

  .toolbarbutton-1[checked="true"] {
    padding-top: 6px !important;
    padding-bottom: 5px !important;
    padding-inline-start: 5px !important;
    padding-inline-end: 4px !important;
  }

  treechildren::-moz-tree-cell-text {
    padding-inline-start: 5px;
  }

  menulist.folderMenuItem menu:not(.folderMenuItem) {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  #tabmail-buttons > toolbarbutton {
    margin-top: 1px;
    margin-bottom: 1px;
  }
}

@media not all and (-moz-os-version: windows-xp) {
  :root {
    --toolbarbutton-hover-background: rgba(0, 0, 0, .1);
    --toolbarbutton-hover-bordercolor: rgba(0, 0, 0, .1);
    --toolbarbutton-header-bordercolor: rgba(0, 0, 0, .1);
    --toolbarbutton-hover-boxshadow: none;

    --toolbarbutton-active-background: rgba(0, 0, 0, .15);
    --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .15);
    --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;

    --toolbarbutton-checkedhover-backgroundcolor: rgba(0, 0, 0, .2);
  }

  #header-view-toolbar[brighttext],
  #ab-toolbox > toolbar[brighttext],
  .mail-toolbox > toolbar[brighttext],
  #event-toolbox > toolbar[brighttext],
  #compose-toolbox > toolbar[brighttext] {
    --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
    --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
    --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);

    --toolbarbutton-active-background: rgba(255, 255, 255, .4);
    --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
    --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;

    --toolbarbutton-checkedhover-backgroundcolor: rgba(255, 255, 255, .5);
  }

  #ab-toolbox > toolbar:-moz-lwtheme,
  .mail-toolbox > toolbar:-moz-lwtheme,
  #compose-toolbox > toolbar:-moz-lwtheme {
    --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
    --toolbarbutton-hover-bordercolor: rgba(0, 0, 0, .2);
    --toolbarbutton-header-bordercolor: rgba(0, 0, 0, .2);

    --toolbarbutton-active-background: rgba(70%, 70%, 70%, .25);
    --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .3);
    --toolbarbutton-active-boxshadow: 0 0 2px rgba(0, 0, 0, .6) inset;

    --toolbarbutton-checkedhover-backgroundcolor: rgba(85%, 85%, 85%, .25);
  }

  .toolbar-primary {
    -moz-appearance: none;
  }

  .toolbarbutton-menu-dropmarker {
    margin-top: 0;
  }

  @media not all and (-moz-windows-default-theme) {
    #tabmail:not(:-moz-lwtheme) {
      background-color: ActiveCaption;
    }

    #tabmail:not(:-moz-lwtheme):-moz-window-inactive {
      background-color: InactiveCaption;
    }

    notification[value="addon-install-blocked"],
    notification[value="addon-install-complete"] {
      background-image: url("chrome://mozapps/skin/extensions/stripes-info-negative.png"),
                        linear-gradient(rgba(204, 217, 234, 0.5),
                                        rgba(231, 237, 246, 0.8));
    }
  }

  @media not all and (-moz-windows-compositor) {
    #print-preview-toolbar:not(:-moz-lwtheme) {
      -moz-appearance: -moz-win-browsertabbar-toolbox;
    }
  }

  /* ::::: primary toolbar buttons ::::: */

  .toolbarbutton-1:not([type="menu-button"]),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    padding: 1px 5px !important;
  }

  .toolbarbutton-1 {
    min-height: 24px;
  }

  .findbar-button {
    padding: 2px 6px;
  }

  .toolbarbutton-1[disabled=true] .toolbarbutton-icon,
  .toolbarbutton-1[disabled=true] .toolbarbutton-menu-dropmarker,
  .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
  .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button >
  .toolbarbutton-icon {
    opacity: .4;
  }

  .toolbarbutton-menubutton-button > .toolbarbutton-icon,
  .toolbarbutton-1 .toolbarbutton-icon {
    width: 18px;
    height: 18px;
  }

  toolbox[labelalign="end"] > toolbar[mode="full"] .toolbarbutton-1
  .toolbarbutton-text {
    padding-inline-start: 2px;
    padding-inline-end: 2px;
  }

  .toolbarbutton-1 .toolbarbutton-menu-dropmarker,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow.png");
  }

  toolbar[brighttext] .toolbarbutton-1 .toolbarbutton-menu-dropmarker,
  toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted.png");
  }

  @media (min-resolution: 1.1dppx) {
    .toolbarbutton-1 .toolbarbutton-menu-dropmarker > .dropmarker-icon,
    .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
      width: 9px;
      height: 7px;
    }

    .toolbarbutton-1 .toolbarbutton-menu-dropmarker,
    .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
      list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow@2x.png");
    }

    toolbar[brighttext] .toolbarbutton-1 .toolbarbutton-menu-dropmarker,
    toolbar[brighttext] .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
      list-style-image: url("chrome://messenger/skin/icons/toolbarbutton-arrow-inverted@2x.png");
    }
  }

  @media (-moz-windows-default-theme) {
    /* Separator between menu and split type buttons */
    .toolbarbutton-1:not(:hover):not(:active):not([open]):not([checked]) >
    .toolbarbutton-menubutton-dropmarker::before,
    .toolbarbutton-1[disabled="true"] >
    .toolbarbutton-menubutton-dropmarker::before {
      content: "";
      display: -moz-box;
      width: 1px;
      height: 18px;
      margin-inline-start: -4px;
      margin-inline-end: 3px;
      background-image: linear-gradient(currentColor 0, currentColor 100%);
      background-position: center;
      background-repeat: no-repeat;
      background-size: 1px 18px;
      opacity: .2;
    }

    .toolbarbutton-1[type="menu-button"] {
      -moz-appearance: none;
      border: none;
      padding: 0 !important;
      background: none !important;
      box-shadow: none !important;
    }

    .toolbarbutton-1:not([type="menu-button"]),
    .toolbarbutton-1 > .toolbarbutton-menubutton-button,
    .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
      -moz-box-pack: center;
    }

    .toolbarbutton-1,
    .toolbarbutton-1[type="menu-button"] {
      margin: 1px;
    }

    toolbar[mode="icons"] .toolbarbutton-menubutton-button,
    toolbar[mode="icons"] .toolbarbutton-1:not([type="menu-button"]) {
      padding-inline-start: 6px !important;
      padding-inline-end: 6px !important;
    }

    .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
      -moz-box-align: center;
    }

    .toolbarbutton-1[type="menu-button"] > .toolbarbutton-menubutton-button {
      border-inline-end: none;
    }

    .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
      padding: 1px 3px !important;
    }

    .findbar-button,
    .toolbarbutton-1:not([type="menu-button"]),
    .toolbarbutton-1 > .toolbarbutton-menubutton-button,
    .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
      -moz-appearance: none;
      background: hsla(210, 32%, 93%, 0) padding-box;
      border: 1px solid;
      border-color: hsla(210, 54%, 20%, 0) hsla(210, 54%, 20%, 0)
                    hsla(210, 54%, 20%, 0);
      box-shadow: 0 1px hsla(0, 0%, 100%, 0) inset,
                  0 1px hsla(210, 54%, 20%, 0),
                  0 0 2px hsla(210, 54%, 20%, 0);
      transition-property: background-color, border-color, box-shadow;
      transition-duration: 150ms;
    }

    .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover,
    .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) >
    .toolbarbutton-menubutton-button,
    .toolbarbutton-1:not([disabled="true"]):hover >
    .toolbarbutton-menubutton-dropmarker,
    .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):not([checked="true"]):not([open="true"]):not(:active):hover {
      background: var(--toolbarbutton-hover-background);
      border-color: var(--toolbarbutton-hover-bordercolor);
      box-shadow: var(--toolbarbutton-hover-boxshadow);
    }

    .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
    .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
    .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
    .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
      background: var(--toolbarbutton-active-background);
      border-color: var(--toolbarbutton-active-bordercolor);
      box-shadow: var(--toolbarbutton-active-boxshadow);
      transition-duration: 10ms;
    }

    .toolbarbutton-1[checked=true]:not(:active):hover {
      background-color: var(--toolbarbutton-checkedhover-backgroundcolor);
      transition: background-color .4s;
    }
  }

  menulist > menupopup:not([type="folder"]) > menuseparator {
    -moz-appearance: none;
    margin-top: 3px;
    margin-bottom: 3px;
    padding-top: 0;
    padding-bottom: 0;
    border-top-color: #d7d7d7;
  }
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-vista),
       (-moz-windows-default-theme) and (-moz-os-version: windows-win7) {
  :root {
    --toolbarbutton-hover-background: linear-gradient(hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, .1));
    --toolbarbutton-hover-bordercolor: hsla(210, 54%, 20%, .15) hsla(210, 54%, 20%, .2) hsla(210, 54%, 20%, .25);
    --toolbarbutton-header-bordercolor: hsla(210, 54%, 20%, .15) hsla(210, 54%, 20%, .2) hsla(210, 54%, 20%, .25);
    --toolbarbutton-hover-boxshadow: 0 1px hsla(0, 0%, 100%, .3) inset,
                                     0 1px hsla(210, 54%, 20%, .03),
                                     0 0 2px hsla(210, 54%, 20%, .1);

    --toolbarbutton-active-background: hsla(210, 54%, 20%, .15) linear-gradient(hsla(0, 0%, 100%, .6), hsla(0, 0%, 100%, .1));
    --toolbarbutton-active-bordercolor: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35) hsla(210, 54%, 20%, .4);
    --toolbarbutton-active-boxshadow: 0 1px 1px hsla(210, 54%, 20%, .1) inset,
                                      0 0 1px hsla(210, 54%, 20%, .2) inset,
  /* allows keyhole-forward-clip-path to be used for non-hover as well as hover: */
                                      0 1px 0 hsla(210, 54%, 20%, 0),
                                      0 0 2px hsla(210, 54%, 20%, 0);

    --toolbarbutton-checkedhover-backgroundcolor: rgba(90%, 90%, 90%, .4);
  }

  .findbar-button,
  .toolbarbutton-1:not([type="menu-button"]),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button,
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
    border-radius: 2px;
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(ltr),
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .toolbarbutton-1 > .toolbarbutton-menubutton-button:-moz-locale-dir(rtl),
  .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(ltr) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active),
  .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled="true"]):hover:active,
  .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled="true"]),
  .toolbarbutton-1:not([type="menu-button"]):not([disabled="true"]):-moz-any([open="true"],[checked="true"],:hover:active) {
    text-shadow: none;
    transition: none;
  }

  .toolbarbutton-1 >
  .toolbarbutton-menubutton-button:not([disabled="true"]):not([open="true"]):not(:active):hover,
  .toolbarbutton-1:not([buttonover="true"]):not([open="true"]):not(:active):hover >
  .toolbarbutton-menubutton-dropmarker:not([disabled="true"]) {
    border-color: hsla(210, 54%, 20%, .3) hsla(210, 54%, 20%, .35)
                  hsla(210, 54%, 20%, .4);
    background-color: hsla(210, 48%, 96%, .75);
    box-shadow: 0 0 1px hsla(210, 54%, 20%, .03),
                0 0 2px hsla(210, 54%, 20%, .1);
  }

  .toolbarbutton-1:not([disabled="true"]):-moz-any(:hover,[open="true"]) >
  .toolbarbutton-menubutton-dropmarker {
    border-inline-start-color: hsla(210, 54%, 20%, .35);
  }
}

@media (-moz-os-version: windows-win8),
       (-moz-os-version: windows-win10) {
  :root:not(:-moz-lwtheme) {
    --fgTabTexture: linear-gradient(transparent, transparent)
  }
}

@media (-moz-windows-default-theme) and (-moz-os-version: windows-win10) {
  #PopupGlodaAutocomplete:not(:-moz-lwtheme) {
    margin-top: -2px;
  }
}

@media (-moz-windows-compositor) {
  #unifinder-searchBox,
  #task-addition-box {
    border-top: none;
    background-color: -moz-dialog;
  }
}
