/* 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/. */

/* ===== mailWindow1.css ================================================
  == Styles for the main Mail window in the default layout scheme.
  ======================================================================= */

@import url("chrome://messenger/skin/messenger.css");
@import url("chrome://messenger/skin/primaryToolbar.css");
@import url("chrome://messenger/skin/folderPane.css");
@import url("chrome://messenger/skin/messageIcons.css");
@import url("chrome://messenger/skin/shared/mailWindow1.css");

#messengerBox {
  background-color: -moz-Dialog;
}

/* ::::: thread decoration ::::: */

/* ::::: group rows ::::: */
treechildren::-moz-tree-row(dummy, hover),
treechildren::-moz-tree-row(dummy, selected, focus) {
  background-color: var(--row-grouped-header-bg-color-selected) !important;
  color: inherit;
}

/* ..... tabs ..... */

#tabpanelcontainer {
  appearance: none;
  color-scheme: light dark;
}

/* ..... Draw in titlebar ..... */

:root[tabsintitlebar][sizemode="normal"] #titlebar {
  appearance: auto;
  -moz-default-appearance: -moz-window-titlebar;
}

:root[tabsintitlebar][sizemode="maximized"] #titlebar {
  appearance: auto;
  -moz-default-appearance: -moz-window-titlebar-maximized;
}

@media (-moz-platform: windows-win7) and (-moz-windows-default-theme),
       (-moz-platform: windows-win8) and (-moz-windows-default-theme) {
  :root[tabsintitlebar][sizemode="normal"] #titlebar {
    appearance: none;
  }
}

@media (-moz-windows-classic) {
  :root[tabsintitlebar] #navigation-toolbox > #toolbar-menubar {
    border-bottom: none;
  }

  :root[tabsintitlebar][sizemode="normal"] #navigation-toolbox > #toolbar-menubar {
    margin-top: 4px;
  }
}

/* The button box must appear on top of the navigation-toolbox in order for
 * click and hover mouse events to work properly for the button in the restored
 * window state. Otherwise, elements in the navigation-toolbox, like the menubar,
 * can swallow those events. It will also place the buttons above the fog on
 * themes with Aero Glass.
 */
.titlebar-buttonbox {
  z-index: 1;
}

.titlebar-buttonbox {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-box;
  position: relative;
}

@media (-moz-windows-classic) {
  .titlebar-buttonbox {
    appearance: none;
  }
}

:root[sizemode="maximized"] .titlebar-buttonbox {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-box-maximized;
}

.titlebar-min {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-minimize;
}

@media (-moz-windows-classic: 0) {
  .titlebar-min {
    margin-inline-end: 2px;
  }
}

.titlebar-max {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-maximize;
}

.titlebar-restore {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-restore;
}

.titlebar-close {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-close;
}

@media (-moz-windows-compositor) {
  @media (-moz-platform: windows-win7),
         (-moz-platform: windows-win8) {
    :root {
      appearance: auto;
      -moz-default-appearance: -moz-win-borderless-glass;
      background-color: transparent;
    }

    /* These should be hidden w/ glass enabled. Windows draws its own buttons. */
    .titlebar-button {
      display: none;
    }

    :root[sizemode="normal"] .titlebar-buttonbox:-moz-lwtheme {
      margin-top: -2px;
    }

    :root[sizemode="maximized"] .titlebar-buttonbox {
      margin-inline-end: 3px;
    }
  }

  @media (-moz-platform: windows-win10) {
    @media (-moz-windows-default-theme) {
      :root:not(:-moz-lwtheme) {
        background-color: var(--color-gray-10);
      }

      :root[tabsintitlebar]:-moz-lwtheme {
        background-color: var(--lwt-accent-color);
      }

      :root[tabsintitlebar]:-moz-lwtheme:-moz-window-inactive {
        background-color: var(--lwt-accent-color-inactive, var(--lwt-accent-color));
      }

      :root[tabsintitlebar] #navigation-toolbox {
        margin-top: -1px;
      }

      :root[tabsintitlebar] #toolbar-menubar:not([inactive="true"]) {
        margin-top: 1px;
      }

      @media (-moz-windows-accent-color-in-titlebar: 0) {
        :root[sizemode=normal][tabsintitlebar] {
          border-top: 1px solid rgba(0, 0, 0, 0.7);
        }
        :root[sizemode=normal][tabsintitlebar][always-use-accent-color-for-window-border]:not(:-moz-window-inactive) {
          border-top-color: AccentColor;
        }
        :root[tabsintitlebar]:not(:-moz-window-inactive,:-moz-lwtheme) {
          background-color: var(--color-gray-30);
        }
      }

      @media (-moz-windows-accent-color-in-titlebar) {
        :root[sizemode=normal][tabsintitlebar] {
          border-top: 1px solid AccentColor;
        }
        :root[tabsintitlebar]:not(:-moz-window-inactive,:-moz-lwtheme) {
          background-color: AccentColor;
        }

        :root[tabsintitlebar] #navigation-toolbox:not(:-moz-window-inactive,:-moz-lwtheme) {
          color: AccentColorText;
        }
      }

      :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive {
        border-top-color: rgba(0, 0, 0, 0.3);
      }
    }

    @media (prefers-contrast) {
      #tabmail-container {
        appearance: auto;
        -moz-default-appearance: -moz-win-exclude-glass;
      }
    }

    .titlebar-buttonbox,
    .titlebar-button {
      appearance: none !important;
    }

    .titlebar-button {
      border: none;
      margin: 0 !important;
      padding: 9px 17px;
      -moz-context-properties: stroke;
      stroke: currentColor;
    }

    @media (-moz-windows-default-theme) {
      @media (-moz-windows-accent-color-in-titlebar) {
        .titlebar-button:not(:-moz-window-inactive,:-moz-lwtheme) {
          stroke: AccentColorText;
        }
      }
    }

    .titlebar-buttonbox > .titlebar-button > .toolbarbutton-icon {
      display: inline-flex;
      width: 12px;
      height: 12px;
    }

    .titlebar-min {
      list-style-image: url("chrome://messenger/skin/window-controls/minimize.svg");
    }

    .titlebar-max {
      list-style-image: url("chrome://messenger/skin/window-controls/maximize.svg");
    }

    .titlebar-restore {
      list-style-image: url("chrome://messenger/skin/window-controls/restore.svg");
    }

    .titlebar-restore:-moz-locale-dir(rtl) {
      transform: scaleX(-1);
    }

    .titlebar-close {
      list-style-image: url("chrome://messenger/skin/window-controls/close.svg");
    }

    :root[lwtheme-image] .titlebar-button {
      -moz-context-properties: unset;
    }
    :root[lwtheme-image] .titlebar-min {
      list-style-image: url("chrome://messenger/skin/window-controls/minimize-themes.svg");
    }
    :root[lwtheme-image] .titlebar-max {
      list-style-image: url("chrome://messenger/skin/window-controls/maximize-themes.svg");
    }
    :root[lwtheme-image] .titlebar-restore {
      list-style-image: url("chrome://messenger/skin/window-controls/restore-themes.svg");
    }
    :root[lwtheme-image] .titlebar-close {
      list-style-image: url("chrome://messenger/skin/window-controls/close-themes.svg");
    }

    /* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
     * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
    @media (min-resolution: 1.20dppx) and (max-resolution: 1.45dppx) {
      .titlebar-button > .toolbarbutton-icon {
        width: 11.5px;
        height: 11.5px;
      }
    }

    /* 175% dpi should result in the same device pixel sizes as 150% dpi. */
    @media (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) {
      .titlebar-button {
        padding-left: 14.1px;
        padding-right: 14.1px;
      }

      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    /* 225% dpi should result in the same device pixel sizes as 200% dpi. */
    @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) {
      .titlebar-button {
        padding-left: 15.3333px;
        padding-right: 15.3333px;
      }

      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    /* 275% dpi should result in the same device pixel sizes as 250% dpi. */
    @media (min-resolution: 2.70dppx) and (max-resolution: 2.95dppx) {
      /* NB: todo: this should also change padding on the buttons
       * themselves, but without a device to test this on, it's
       * impossible to know by how much. */
      .titlebar-button > .toolbarbutton-icon {
        width: 10.8px;
        height: 10.8px;
      }
    }

    @media (-moz-windows-default-theme) {
      .titlebar-button:hover {
        background-color: hsla(0, 0%, 0%, .12);
      }

      .titlebar-button:hover:active {
        background-color: hsla(0, 0%, 0%, .22);
      }

      .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive {
        opacity: 0.5;
      }

      .titlebar-close:hover {
        stroke: white;
        background-color: var(--color-red-60);
      }

      .titlebar-close:hover:active {
        background-color: var(--color-red-50);
      }

      @media (prefers-color-scheme: dark) {
        .titlebar-button:hover {
          background-color: hsla(0, 0%, 100%, .12);
        }

        .titlebar-button:hover:active {
          background-color: hsla(0, 0%, 100%, .22);
        }

        .titlebar-close:hover {
          background-color: var(--color-red-70);
        }

        .titlebar-close:hover:active {
          background-color: var(--color-red-60);
        }
      }
    }
    @media (prefers-contrast) {
      .titlebar-button {
        stroke: ButtonText;
        background-color: Field;
      }
      .titlebar-button:hover {
        stroke: SelectedItemText;
        background-color: SelectedItem;
      }

      .titlebar-min {
        list-style-image: url("chrome://messenger/skin/window-controls/minimize-highcontrast.svg");
      }

      .titlebar-max {
        list-style-image: url("chrome://messenger/skin/window-controls/maximize-highcontrast.svg");
      }

      .titlebar-restore {
        list-style-image: url("chrome://messenger/skin/window-controls/restore-highcontrast.svg");
      }

      .titlebar-close {
        list-style-image: url("chrome://messenger/skin/window-controls/close-highcontrast.svg");
      }
    }
  }
}

#messagepanebox {
  border-top-width: 0;
  border-inline-start: none;
}

@media (prefers-contrast) {
  :root:not(:-moz-lwtheme)
    treechildren::-moz-tree-image(selected) {
    color: inherit;
  }
}

@media (-moz-windows-default-theme) {
  :root:not([lwt-tree],:-moz-lwtheme) #folderTree {
    background-color: #fafafa;
  }
}

@media (-moz-platform: windows-win7) and (-moz-windows-default-theme) {
  @media (-moz-windows-glass: 0) {
    #messengerWindow:not([tabsintitlebar]) #navigation-toolbox:not(:-moz-lwtheme) {
      background-color: var(--color-gray-30);
    }
  }
}

@media (-moz-platform: windows-win7) and (-moz-windows-default-theme),
       (-moz-platform: windows-win8) and (-moz-windows-default-theme) {
  @media (-moz-windows-compositor) {
    :root:not(:-moz-lwtheme) {
      --lwt-tabs-border-color: var(--glassShadowColor);
    }

    #messengerWindow[sizemode=normal] #tabpanelcontainer {
      border: 1px solid var(--glassShadowColor);
      border-top: none;
      background-clip: padding-box;
    }

    #messengerWindow[sizemode=normal] #toolbar-menubar {
      border-right: 1px solid var(--glassShadowColor);
      border-left: 1px solid var(--glassShadowColor);
      background-clip: padding-box;
    }

    #messengerWindow[sizemode=normal] .statusbar {
      margin-top: -1px;
      border: 1px solid var(--glassShadowColor);
      border-top-color: threedshadow;
      border-radius: 1px 1px 0 0;
      background-clip: padding-box;
    }
  }
}

@media (-moz-platform: windows-win8) and (-moz-windows-default-theme) {
  #messengerWindow:not([tabsintitlebar]) #navigation-toolbox:not(:-moz-lwtheme) {
    background-color: var(--color-gray-30);
  }
}

@media not (-moz-windows-non-native-menus) {
  #viewPickerPopup > menu > .menu-text {
    padding-inline-start: 0 !important;
  }
}

@media (-moz-windows-compositor: 0) {
  @media (-moz-windows-default-theme) {
    #messengerWindow:not(:-moz-lwtheme) {
      background-color: rgb(185, 209, 234);
    }
    #messengerWindow:not(:-moz-lwtheme):-moz-window-inactive {
      background-color: rgb(215, 228, 242);
    }
  }
}

/* Global notification popup */

#notification-popup {
  appearance: none;
  background: transparent;
  border: none;
}