/*= Proton Commons ===========================================================*/
@include 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 {
      /* Medium and small buttons get sized to 7/14 and 6/12px padding (when adding
       * the 1px border): */
      padding: 6px 13px !important;
      min-height: 28px !important;
      font-size: 0.95em !important;
    }
    &.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: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;
    }
  }

  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;
  }

  /*- Radio Button -----------------------------------------------------------*/
  xul|radio {
    @include Proton.RadioGlobal;
  }

  xul|*.radio-check {
    @include Proton.RadioIcon;
  }
  xul|*.radio-check[selected] {
    @include Proton.RadioCheckedIcon;
  }

  xul|radio:not([disabled="true"]):hover {
    > xul|*.radio-check {
      @include Proton.RadioIconHover;
    }
    &:active > xul|*.radio-check {
      @include Proton.RadioIconActive;
    }
  }

  xul|radio:not([disabled="true"])[selected]:hover {
    > xul|*.radio-check {
      @include Proton.RadioCheckedIconHover;
    }
    &:active > xul|*.radio-check {
      @include Proton.RadioCheckedIconActive;
    }
  }

  xul|*.radio-label-box {
    @include Proton.RadioLabel;
  }

  /* Disabled checkboxes, radios and labels */
  xul|checkbox[disabled="true"],
  xul|radio[disabled="true"],
  xul|label[disabled="true"] {
    @include Proton.DisabledMenuItem;
  }

  /*- Check Box --------------------------------------------------------------*/
  /* From checkbox.css */
  checkbox {
    @include Proton.CheckboxGlobal;
  }

  .checkbox-check {
    @include Proton.CheckboxIcon;
  }
  .checkbox-check[checked] {
    @include Proton.CheckboxCheckedIcon;
  }

  checkbox:not([disabled="true"]):hover {
    > .checkbox-check {
      @include Proton.CheckboxIconHover;
    }
    &:active > .checkbox-check {
      @include Proton.CheckboxIconActive;
    }

    > .checkbox-check[checked] {
      @include Proton.CheckboxCheckedIconHover;
    }
    &:active > .checkbox-check[checked] {
      @include Proton.CheckboxCheckedIconActive;
    }
  }

  checkbox:-moz-focusring > .checkbox-check {
    @include Proton.CheckboxFocusRing;
  }

  @include Contrast {
    checkbox:not([disabled="true"]):hover > .checkbox-check {
      @include Proton.CheckboxIconHoverContrast;
    }

    .checkbox-check[checked] {
      @include Proton.CheckboxCheckedIconContrast;
    }

    checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
    checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
      > .checkbox-check[checked] {
        @include Proton.CheckboxCheckedIconHoverContrast;
      }
    }
  }

  .checkbox-icon[src] {
    margin-inline-end: 2px !important;
  }
  .checkbox-label {
    @include Proton.ChexboxLabel;
  }

  checkbox[disabled="true"] {
    @include Proton.DisabledChexbox;
  }

  /* From common.css */
  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;

    &[size="medium"] {
      padding-block: 6px !important;
      padding-inline: 16px 10px !important;
    }
    &[size="large"] {
      padding-block: 8px !important;
      padding-inline: 16px 12px !important;
    }

    &:hover {
      background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace)) !important;
    }
    &:hover:active {
      background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace)) !important;
    }
    &:-moz-focusring {
      @include AccentColor {
        outline: 2px solid var(--focus-outline-color, $accentColor) !important;
      }
      outline-offset: var(--focus-outline-offset, 2px) !important;
    }
  }

  #label-box {
    @include BoxAlign("center", true);
    @include BoxPack("center", true);
    font-weight: 600 !important;
  }

  dropmarker {
    @include Box(true);
    appearance: none !important;
    width: 12px !important;
    height: 12px !important;

    &[exportparts="icon: dropmarker-icon"] {
      /* dropmarker::part(icon)
       * ::part is not apply chrome
       */
      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,
  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;
    }
    &:not([disabled="true"])[selected="true"] {
      color: var(--in-content-item-selected-text) !important;
      background-color: var(--in-content-item-selected) !important;
    }
    &[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) {
      @include 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) {
      @include Box(true);
      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;
    }
  }
}
