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

@import url("chrome://global/skin/global.css");
@namespace html url("http://www.w3.org/1999/xhtml");

@media (-moz-platform: macos) {
  #topBar {
    position: relative;
    -moz-window-dragging: drag;
    border-bottom: 1px solid ThreeDShadow;

    align-items: center;
    justify-content: center;

    @media not (-moz-mac-tahoe-theme) {
      &::after {
        content: "";
        position: absolute;
        inset: 0;
        appearance: auto;
        -moz-default-appearance: -moz-window-titlebar;
        z-index: -1;
      }
    }
  }
}

@media not (-moz-platform: macos) {
  #topBar {
    border-bottom: 1px solid ThreeDShadow;
    padding-inline-start: 10px;
    background-color: Field;
    color: FieldText;
  }
}

/* View buttons */
@media not (-moz-platform: macos) {
  #viewGroup > radio {
    appearance: none;
    list-style-image: none;
    min-width: 4.5em;
    margin: 0;
    padding: 3px;
  }

  #viewGroup > radio > .radio-label-box {
    margin: 0;
    padding: 0 6px;
  }

  #viewGroup:focus-visible > radio[focused="true"] > .radio-label-box {
    outline: var(--default-focusring);
  }

  #viewGroup .radio-icon {
    background-image: url("chrome://browser/skin/pageInfo.png");
    width: 32px;
    height: 32px;
    /* Avoid anti-aliasing seams in HiDPI */
    image-rendering: crisp-edges;
  }

  #generalTab .radio-icon {
    background-position-x: 0;
  }

  #mediaTab .radio-icon {
    background-position-x: -32px;
  }

  #permTab .radio-icon {
    background-position-x: -96px;
  }

  #securityTab .radio-icon {
    background-position-x: -128px;
  }
}

@media (-moz-platform: linux) {
  #viewGroup > radio {
    color: FieldText;
  }

  #viewGroup > radio[selected] {
    background-color: SelectedItem;
    color: SelectedItemText;
  }
}

@media (-moz-platform: windows) {
  #viewGroup {
    padding-inline-start: 10px;
  }

  #viewGroup > radio:hover {
    background-color: #e0e8f6;
    color: black;
  }

  #viewGroup > radio[selected] {
    background-color: #c1d2ee;
    color: black;
  }

  #viewGroup > radio:is(:hover, [selected]) .radio-icon {
    background-position-y: -32px;
  }
}

@media (-moz-platform: macos) {
  #viewGroup {
    margin: 4px 0 9px;

    > radio,
    > toolbarbutton {
      flex-direction: column;
      align-items: center;
      font: menu;
      margin: 0 2px;
      padding: 3px 6px;
      border-radius: var(--border-radius-xsmall);

      &:hover,
      &[selected] {
        color: var(--button-text-color-hover);
        background-color: var(--button-background-color-hover);
      }

      &:hover:active {
        color: var(--button-text-color-active);
        background-color: var(--button-background-color-active);
      }
    }
  }
}

/* Misc */
tree {
  margin: 0.5em;
}

html|input {
  background: transparent;
  border: none;
  padding: 0 var(--space-small);
  outline-offset: var(--focus-outline-offset);
}

html|input.header {
  margin-inline-start: 0;
}

#imagecontainerbox {
  margin: 0.5em;
  background: white;
  overflow: auto;
  border: 1px solid ThreeDLightShadow;
}

html|input:disabled {
  font-style: italic;
}

@media (-moz-platform: macos) {
  .help-button {
    appearance: auto;
    -moz-default-appearance: -moz-mac-help-button;

    .button-text {
      visibility: hidden;
    }
  }
}

/* General Tab */

@media (-moz-platform: linux) {
  #generalPanel > #titletext {
    margin-inline-start: 5px;
  }
}

#securityBox description {
  margin-inline-start: 10px;
}

#general-security-identity {
  white-space: pre-wrap;
  line-height: 2em;
}

/* Media Tab */
#imagetree {
  min-height: 10em;
  margin-block: 2px 0;
}

#mediaSplitter {
  background: none;
  appearance: none;
  border-style: none;
}

@media not (-moz-platform: macos) {
  #mediaSplitter {
    height: 0.8em;
  }
}

#mediaTable {
  margin-bottom: 2em;
}

#mediaLabelColumn {
  min-width: 10em;
}

treechildren::-moz-tree-cell-text(broken) {
  font-style: italic;
  color: graytext;
}

/* Permissions Tab */

#permList {
  appearance: auto;
  -moz-default-appearance: listbox;
  margin: 0.5em;
  overflow: auto;
  background-color: Field;
  color: FieldText;
  border: 1px solid ThreeDShadow;
}

.permission {
  padding: 6px 7px;
  border-bottom: 1px dotted ThreeDShadow;
}

.permissionLabel {
  font-weight: var(--font-weight-bold);
}

.permission:hover {
  background-color: -moz-dialog;
  color: -moz-DialogText;
}

/* Security Tab */

#securityPanel table {
  margin-bottom: 1em;
}