/*= Proton Commons ===========================================================*/
@-moz-document url("chrome://global/content/commonDialog.xhtml"),
  url("chrome://pippki/content/editcacert.xhtml"),
  url("chrome://pippki/content/deletecert.xhtml"),
  url("chrome://pippki/content/exceptionDialog.xhtml"),
  url("chrome://mozapps/content/downloads/unknownContentType.xhtml"),
  url("chrome://global/content/appPicker.xhtml"),
  url("chrome://browser/content/pageinfo/pageInfo.xhtml")
{
  /*- Overwrite --------------------------------------------------------------*/
  @include Dark {
    :root {
      --in-content-page-background: #42414d;
    }
  }

  #{system-default-theme()} {
    --checkbox-unchecked-bgcolor: var(--in-content-button-background) !important;
    --checkbox-unchecked-hover-bgcolor: var(--in-content-button-background-hover) !important;
    --checkbox-unchecked-active-bgcolor: var(--in-content-button-background-active) !important;
    --checkbox-checked-bgcolor: var(--in-content-primary-button-background) !important;
    --checkbox-checked-color: var(--in-content-primary-button-text-color) !important;
    --checkbox-checked-hover-bgcolor: var(--in-content-primary-button-background-hover) !important;
    --checkbox-checked-active-bgcolor: var(--in-content-primary-button-background-active) !important;
  }

  /*- Dialog -----------------------------------------------------------------*/
  #commonDialog,
    #editCaCert,
    #deleteCertificate,
    #exceptiondialog,
    #unknownContentType,
    #app-picker,
    #topBar, /* #topBar, #mainDeck: Page Info */
    #mainDeck {
    -moz-appearance: none !important; /* For Mac */
    color: var(--in-content-page-color) !important;
    background-color: var(--in-content-page-background) !important;
    /* border-radius: 0 0 8px 8px !important; */
  }

  /*- Button -----------------------------------------------------------------*/
  button {
    -moz-appearance: none !important;
    color: var(--in-content-button-text-color) !important;
    background-color: var(--in-content-button-background) !important;
    font: inherit;
    font-size: 1em !important;
    font-weight: 600 !important;
    min-height: 32px !important;
    border: 1px solid transparent !important; /* shows up in high-contrast mode */
    border-radius: var(--in-content-button-border-radius) !important;
    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;

    min-height: 32px !important;
    /* Use the same margin of other elements for the alignment */
    margin-inline: 4px !important;
    min-width: 6.3em !important;
  }

  /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
     * the 1px border): */
  button.medium {
    padding: 6px 13px !important;
    min-height: 28px !important;
    font-size: 0.95em !important;
  }
  button.small {
    padding: 5px 11px !important;
    min-height: 24px !important;
    font-size: 0.9em !important;
  }

  /* Remove margin added by button.css */
  xul|button > .button-box > .button-text {
    margin: 0 !important;
  }

  button:-moz-focusring,
    xul|menulist:-moz-focusring,
    xul|checkbox:-moz-focusring > .checkbox-check, /* :not([native]) to win specificity over checkbox.css */
    xul|radio[focused="true"]:-moz-focusring {
    box-shadow: none !important;
    outline: 2px solid var(--in-content-focus-outline-color) !important;
    outline-offset: 2px !important;
  }
  button:not([disabled="true"]):hover {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
    border-color: transparent !important;
  }

  xul|button:not([disabled="true"]):hover:active,
  xul|button[open],
  xul|button[open]:hover,
  xul|menulist[open="true"]:not([disabled="true"]) {
    background-color: var(--in-content-button-background-active) !important;
  }

  xul|button[default] {
    background-color: var(--in-content-primary-button-background) !important;
    color: var(--in-content-primary-button-text-color) !important;
  }
  xul|button[default]:not([disabled="true"]):hover {
    background-color: var(--in-content-primary-button-background-hover) !important;
    color: var(--in-content-primary-button-text-color) !important;
  }
  xul|button[default]:not([disabled="true"]):hover:active {
    background-color: var(--in-content-primary-button-background-active) !important;
  }

  xul|button[disabled="true"],
  xul|menulist[disabled="true"] {
    opacity: 0.4 !important;
  }
  xul|button:not([disabled="true"]):hover,
  xul|menulist:not([disabled="true"]):hover {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
    border-color: transparent !important;
  }

  @include Contrast {
    xul|button[default]:not([disabled="true"]):hover {
      border-color: currentColor !important;
    }

    button:focus {
      color: var(--in-content-button-text-color) !important;
    }

    xul|button[default]:focus,
    button.primary:focus {
      color: var(--in-content-primary-button-text-color) !important;
    }
  }

  /*- Radio Button -----------------------------------------------------------*/
  xul|radio {
    /* margin-inline-start: 0 !important; */
    appearance: none !important;
  }

  xul|*.radio-check {
    appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    border: 1px solid var(--in-content-box-border-color) !important;
    border-radius: 100% !important;
    margin-block: 2px !important; /* extend the vertical clicktarget */
    margin-inline: 0 6px !important;
    background-color: var(--in-content-button-background) !important;
    background-position: center !important;
    flex-shrink: 0 !important; /* avoid shrinking inside flex container */
  }

  xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
    background-color: var(--in-content-button-background-hover) !important;
    color: var(--in-content-button-text-color-hover) !important;
  }

  xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
    background-color: var(--in-content-button-background-active) !important;
  }

  xul|*.radio-check[selected] {
    -moz-context-properties: fill !important;
    fill: currentColor !important;
    color: var(--in-content-primary-button-text-color) !important;
    background-color: var(--in-content-primary-button-background) !important;
    background-image: url("chrome://global/skin/icons/radio.svg") !important;
    border-color: transparent !important;

    /* Style the button also when printing with "Print Backgrounds" unchecked */
    color-adjust: exact !important;
  }

  xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
    background-color: var(--in-content-primary-button-background-hover) !important;
    color: var(--in-content-primary-button-text-color-hover) !important;
  }

  xul|radio:not([disabled="true"])[selected]:hover:active > xul|*.radio-check {
    background-color: var(--in-content-primary-button-background-active) !important;
  }

  xul|*.radio-label-box {
    margin-inline: 0 8px !important;
    padding-inline-start: 0 !important;
  }

  /* Disabled checkboxes, radios and labels */
  xul|checkbox[disabled="true"],
  xul|radio[disabled="true"],
  xul|label[disabled="true"] {
    color: inherit !important;
  }

  xul|checkbox[disabled="true"],
  xul|radio[disabled="true"],
  xul|label[disabled="true"] {
    opacity: 0.5 !important;
  }

  /*- Check Box --------------------------------------------------------------*/
  /* From checkbox.css */
  checkbox {
    appearance: none !important;
    -moz-box-align: center !important;
    margin: 4px 2px !important;
  }

  .checkbox-icon[src] {
    margin-inline-end: 2px !important;
  }
  .checkbox-label {
    margin: 1px 0 !important;
  }

  checkbox[disabled="true"] {
    opacity: 0.4 !important;
  }

  .checkbox-check {
    appearance: none !important;
    color: var(--checkbox-border-color, ThreeDDarkShadow) !important;
    background-color: var(--checkbox-unchecked-bgcolor, Field) !important;
    border: 1px solid currentColor !important;
    border-radius: 2px !important;
    margin-inline-end: 6px !important;
  }

  .checkbox-check {
    height: 16px !important;
    width: 16px !important;
  }

  checkbox:not([disabled="true"]):hover > .checkbox-check {
    background-color: var(
      --checkbox-unchecked-hover-bgcolor,
      color-mix(in srgb, -moz-accent-color 4%, Field)
    ) !important;
  }

  checkbox:not([disabled="true"]):hover:active > .checkbox-check {
    background-color: var(
      --checkbox-unchecked-active-bgcolor,
      color-mix(in srgb, -moz-accent-color 8%, Field)
    ) !important;
  }

  .checkbox-check[checked] {
    border-color: var(--checkbox-checked-border-color, transparent) !important;
    background-color: var(--checkbox-checked-bgcolor, -moz-accent-color) !important;
    background-image: url("chrome://global/skin/icons/check.svg") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    -moz-context-properties: fill !important;
    fill: currentColor !important;
    color: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
    /* Style the button also when printing with "Print Backgrounds" unchecked */
    color-adjust: exact !important;
  }

  checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
    background-color: var(
      --checkbox-checked-hover-bgcolor,
      color-mix(in srgb, currentColor 12.5%, -moz-accent-color)
    ) !important;
  }

  checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] {
    background-color: var(
      --checkbox-checked-active-bgcolor,
      color-mix(in srgb, currentColor 25%, -moz-accent-color)
    ) !important;
  }

  checkbox:-moz-focusring > .checkbox-check {
    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
  }

  @include Contrast {
    checkbox:not([disabled="true"]):hover > .checkbox-check {
      /* color will set the border-color on the check due to how HCM works for in-content pages. */
      color: var(--checkbox-checked-border-color, color-mix(in srgb, -moz-accent-color 4%, Field)) !important;
    }

    .checkbox-check[checked] {
      color: var(--checkbox-checked-border-color, currentColor) !important;
      fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
    }

    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
      color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
      fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
    }
  }

  /* From common.css */
  xul|*.checkbox-check {
    margin-block: 2px !important;
  }
  xul|richlistitem > xul|*.checkbox-check {
    margin: 3px 6px !important;
  }

  /*- Menulist ---------------------------------------------------------------*/
  /* From mulist.css */
  xul|menulist {
    appearance: none !important;
    background-color: var(--in-content-button-background, ButtonFace) !important;
    color: var(--in-content-button-text-color, ButtonText) !important;
    border-radius: 4px !important;
    padding-block: 4px !important;
    padding-inline: 12px 8px !important;
    margin: 5px 2px 3px !important;
  }

  xul|menulist[size="medium"] {
    padding-block: 6px !important;
    padding-inline: 16px 10px !important;
  }

  xul|menulist[size="large"] {
    padding-block: 8px !important;
    padding-inline: 16px 12px !important;
  }

  xul|menulist:hover {
    background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
  }

  xul|menulist:hover:active {
    background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
  }

  xul|menulist:-moz-focusring {
    outline: 2px solid var(--focus-outline-color, -moz-accent-color) !important;
    outline-offset: var(--focus-outline-offset, 2px) !important;
  }

  #label-box {
    -moz-box-align: center !important;
    -moz-box-pack: center !important;
    font-weight: 600 !important;
  }

  dropmarker {
    display: -moz-box !important;
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;
  }

  /* dropmarker::part(icon)
   * ::part is not apply chrome
   */
  dropmarker[exportparts="icon: dropmarker-icon"] {
    list-style-image: url("chrome://global/skin/icons/arrow-down.svg") !important;
    -moz-context-properties: fill !important;
    fill: currentColor !important;
  }

  #highlightable-label:not([highlightable="true"]),
  #label[highlightable="true"] {
    display: none !important;
  }

  xul|menuitem > label:not(.menu-text) {
    margin: 0 3px !important;
  }

  /* From common.css */
  xul|menulist > xul|menupopup {
    appearance: none !important;

    /* Reset native styles on Windows and macOS */
    border: none !important;
    background-color: transparent !important;

    --panel-border-color: var(--in-content-box-border-color) !important;
    --panel-border-radius: 2px !important;
    --panel-background: var(--in-content-box-background) !important;
    --panel-color: var(--in-content-text-color) !important;
    --panel-padding: 0 !important;
  }

  xul|menulist > xul|menupopup xul|menu,
  xul|menulist > xul|menupopup xul|menuitem {
    appearance: none !important;
    font-size: 1em !important;
    padding-block: 0.2em !important;
    padding-inline: 10px 30px !important;
  }

  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
    color: var(--in-content-item-hover-text) !important;
    background-color: var(--in-content-item-hover) !important;
  }

  xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
  xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
    color: var(--in-content-item-selected-text) !important;
    background-color: var(--in-content-item-selected) !important;
  }

  xul|menulist > xul|menupopup > xul|menu[disabled="true"],
  xul|menulist > xul|menupopup > xul|menuitem[disabled="true"] {
    color: #999 !important;
    /* override the [_moz-menuactive="true"] background color from
         global/menu.css */
    background-color: transparent !important;
  }

  xul|menulist > xul|menupopup xul|menuseparator {
    appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-top: 1px solid var(--in-content-box-border-color) !important;
    border-bottom: none !important;
  }

  xul|menulist::part(dropmarker) {
    margin-block: 1px !important;
  }

  /* Override menulist.css */
  xul|menulist[disabled="true"] {
    background-color: var(--in-content-button-background) !important;
  }

  xul|menulist:-moz-focusring > xul|*.menulist-label-box {
    outline: none !important;
  }

  /*- List Boxes -------------------------------------------------------------*/
  html|select[size][multiple],
  xul|listheader,
  xul|richlistbox {
    appearance: none !important;
    margin-inline: 0 !important;
    background-color: var(--in-content-box-background) !important;
    border: 1px solid var(--in-content-box-border-color) !important;
    border-radius: 4px !important;
    color: var(--in-content-text-color) !important;
  }

  xul|listheader {
    border-bottom: none !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding-bottom: 1px !important;
    box-shadow: inset 0 -1px var(--in-content-table-border-color) !important;
    overflow: clip !important; /* Clip border-radius */
  }

  xul|listheader + xul|richlistbox {
    margin-top: 0 !important;
    border-top: none !important;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
  }

  html|select[size][multiple] > html|option,
  xul|treechildren::-moz-tree-row {
    padding: 0.3em inherit !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background-image: none !important;
  }

  xul|treechildren::-moz-tree-row(multicol, odd) {
    background-color: var(--in-content-box-background-odd);
  }

  html|select[size][multiple] > html|option:hover,
  xul|richlistbox > xul|richlistitem:not([disabled="true"], [selected]):hover,
  xul|treechildren::-moz-tree-row(hover) {
    background-color: var(--in-content-item-hover) !important;
    color: var(--in-content-item-hover-text) !important;
  }

  xul|richlistbox > xul|richlistitem[selected],
  xul|treechildren::-moz-tree-row(selected) {
    background-color: var(--in-content-item-selected) !important;
    color: var(--in-content-item-selected-text) !important;
  }

  xul|richlistbox:not(#categories) > xul|richlistitem[selected] {
    /* Ensure buttons/menulists inside richlistitems (containers, applications) look OK */
    --in-content-button-background: color-mix(in srgb, currentColor 15%, transparent) !important;
    --in-content-button-background-hover: color-mix(in srgb, currentColor 30%, transparent) !important;
    --in-content-button-background-active: color-mix(in srgb, currentColor 45%, transparent) !important;
    --in-content-button-text-color: var(--in-content-item-selected-text) !important;
    --in-content-button-text-color-hover: var(--in-content-item-selected-text) !important;
    --in-content-focus-outline-color: var(--in-content-item-selected-text) !important;
  }

  xul|richlistitem[selected] xul|menulist:focus-visible {
    outline-offset: -2px !important;
  }

  /* Use a 2px border so that selected row highlight is still visible behind
        an existing high-contrast border that uses the background color */
  @include Contrast {
    xul|treechildren::-moz-tree-row(selected) {
      border: 2px solid currentColor !important;
      border-radius: 4px !important;
    }
  }

  xul|panel[type="autocomplete-richlistbox"] {
    background-color: var(--in-content-box-background) !important;
    border: 1px solid var(--in-content-box-border-color) !important;
    color: var(--in-content-text-color) !important;
  }

  /*- Each OS ----------------------------------------------------------------*/
  @include OS($win) {
    xul|checkbox,
    xul|radio {
      padding-inline-start: 0 !important;
    }

    /* Override menulist.css */
    xul|menulist[disabled="true"] {
      background-color: var(--in-content-button-background) !important;
    }

    xul|menulist:-moz-focusring > xul|*.menulist-label-box {
      outline: none !important;
    }
  }

  @include OS($linux) {
    /* Overriding appearance also avoids incorrect selection background color with light text. */
    xul|button > xul|*.button-box,
    xul|menulist::part(label-box),
    xul|*.radio-label-box,
    xul|*.checkbox-label-box {
      appearance: none !important;
    }

    xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
      appearance: none !important;
    }
    xul|menulist {
      font-size: inherit !important;
    }
    xul|menulist::part(dropmarker) {
      display: -moz-box;
      margin-block: 6px !important;
    }
    xul|menulist:-moz-focusring::part(label-box) {
      outline: none !important;
    }
  }

  @include OS($mac) {
    xul|menulist > xul|menupopup > xul|menuitem[checked="true"]::before,
    xul|menulist > xul|menupopup > xul|menuitem[selected="true"]::before {
      display: none !important;
    }

    xul|menulist::part(dropmarker) {
      display: -moz-box !important;
      margin-block: 1px !important;
    }

    xul|menulist > xul|menupopup xul|menu,
    xul|menulist > xul|menupopup xul|menuitem {
      padding-inline-end: 34px !important;
    }

    xul|*.checkbox-icon,
    xul|*.radio-icon {
      margin-inline-end: 0 !important;
    }

    xul|*.text-link:-moz-focusring {
      box-shadow: none !important;
    }
  }
}