/*= Page Info ================================================================*/
@include moz-document(url "chrome://browser/content/pageinfo/pageInfo.xhtml") {
  :root {
    --in-content-border-color: color-mix(in srgb, currentColor 41%, transparent) !important;
  }

  #viewGroup > radio {
    padding: var(--in-content-button-vertical-padding) var(--in-content-button-horizontal-padding) !important;
    margin: 4px !important;

    list-style-image: none !important;
    background-image: var(--viewgroup-image) !important;
    background-repeat: no-repeat;
    background-position: top var(--in-content-button-vertical-padding) center;
    background-size: 32px !important;

    -moz-context-properties: fill !important;
    fill: currentColor !important;
    color: var(--in-content-deemphasized-text) !important; /* FieldText */

    .radio-icon {
      background-image: none !important; // #680
    }

    @include NotOption("userChrome.rounding.square_button") {
      border-radius: 8px !important;
    }

    &:hover {
      background-color: var(--in-content-button-background-hover) !important; /* #E0E8F6; */
    }
    &[selected="true"] {
      color: var(--in-content-button-text-color) !important; /* SelectedItemText */
      background-color: var(--in-content-button-background-active) !important; /* #C1D2EE; */
    }

    @include OS($mac) {
      height: auto !important;
    }
  }
  #generalTab {
    --viewgroup-image: url(chrome://global/skin/icons/page-portrait.svg);
  }
  #mediaTab {
    --viewgroup-image: url(chrome://browser/skin/canvas.svg);
  }
  #permTab {
    --viewgroup-image: url(chrome://browser/skin/permissions.svg);
  }
  #securityTab {
    --viewgroup-image: url(chrome://global/skin/icons/security.svg);
  }

  #viewGroup > radio > .radio-label-box {
    /* Overwrite */
    margin: 0 !important;
    padding: 0 6px !important;

    @include OS($mac) {
      padding-top: 32px !important; /* as -moz-image-region: rect(0px, 32px, 32px, 0px); */
    }
  }

  #mainDeck input {
    color: var(--in-content-page-color) !important;
  }

  #permList {
    -moz-appearance: none !important;
    color: var(--in-content-page-color) !important;
    background-color: var(--in-content-box-background) !important;
  }
  .permission:hover {
    color: var(--in-content-text-color) !important;
    background-color: var(--in-content-button-background-hover) !important;
  }
  .permission radio[disabled] {
    color: var(--in-content-deemphasized-text) !important;
  }

  treecols {
    -moz-appearance: none !important;
    background: var(--in-content-table-header-background) !important;
    color: var(--in-content-table-header-color) !important;

    > treecol,
    > treecolpicker.treecol-image {
      -moz-appearance: none !important;
      color: var(--in-content-table-header-color) !important;
      background: var(--in-content-table-header-background) !important;
      border: 1px solid var(--in-content-table-border-color) !important;
      padding: 4px !important;
      border-spacing: 0;

      text-align: center !important;
    }
  }

  tree,
  treechildren::-moz-tree-row {
    -moz-appearance: none !important;
    color: var(--in-content-text-color) !important;
    background-color: var(--in-content-table-background) !important;
    border: 1px solid var(--in-content-table-border-color) !important;
  }
  treechildren {
    &::-moz-tree-row(odd) {
      background-color: var(--in-content-box-background-odd) !important;
    }
    &::-moz-tree-row(hover) {
      color: var(--in-content-item-hover-text) !important;
      background-color: var(--in-content-item-hover) !important;
    }
    &::-moz-tree-row(selected) {
      background-color: var(--in-content-item-selected) !important;
    }

    &::-moz-tree-cell {
      border-inline: 1px solid var(--in-content-table-border-color) !important;
      border-spacing: 0 !important;
      padding: 4px !important;
      margin: 0 !important;
    }
    &::-moz-tree-cell-text(hover) {
      color: var(--in-content-item-hover-text) !important;
    }
    &::-moz-tree-cell-text(selected) {
      font-weight: 600 !important;
      color: var(--in-content-item-selected-text) !important;
    }
  }

  #imagecontainerbox {
    background-color: var(--in-content-box-background) !important;
  }

  #metatree,
  #imagetree,
  #imagecontainerbox,
  #permList {
    border-radius: 4px !important;
  }
  #metatree,
  #imagetree {
    overflow: hidden !important;
  }

  #topBar,
  #imagecontainerbox,
  #permList {
    border-color: var(--in-content-table-border-color) !important;
  }
}
