/* 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/. */
@namespace html "http://www.w3.org/1999/xhtml";

:root { -moz-box-layout: flex }

#aboutDialog {
  /* Set an explicit line-height to avoid discrepancies in 'auto' spacing
     across screens with different device DPI, which may cause font metrics
     to round differently. */
  line-height: 1.5;
}

#aboutDialogContainer {
  -moz-box-flex: 1;
}

#rightBox {
  background-image: url("chrome://branding/content/about-wordmark.svg");
  background-repeat: no-repeat;
  background-size: 288px auto;
  /* padding-top creates room for the wordmark */
  padding-top: 38px;
  margin-top: 20px;
}

#rightBox:-moz-locale-dir(rtl) {
  background-position: 100% 0;
}

#bottomBox {
  padding: 15px 10px 0;
  min-height: 52px;
}

#release {
  font-weight: bold;
  font-size: 125%;
  margin-top: 10px;
  margin-inline-start: 0;
}

#version {
  font-weight: bold;
  margin-inline-start: 0;
  user-select: text;
  -moz-user-focus: normal;
  cursor: text;
}

#version.update {
  font-weight: normal;
}

#distribution,
#distributionId {
  display: none;
  margin-block: 0;
}

.text-blurb {
  margin-bottom: 10px;
  margin-inline-start: 0;
  padding-inline-start: 0;
}

#updateDeck {
  align-items: center;
}

#updateButton {
  margin-inline-start: 0;
  padding-inline-start: 0;
}

#updateDeck description {
  margin: 0;
}

#rightBox {
  /* We don't want this box to contribute arbitrarily to the intrinsic size of
   * the dialog, so set the width to a reasonable size, but let it flex to take
   * all available space. */
  width: 430px;
  -moz-box-flex: 1;
}

.update-throbber {
  width: 16px;
  min-height: 16px;
  margin-inline-end: 3px;
}

html|img.update-throbber {
  vertical-align: middle;
}

image.update-throbber {
  list-style-image: url("chrome://global/skin/icons/loading.png");
}

@media (min-resolution: 1.1dppx) {
  .update-throbber {
    list-style-image: url("chrome://global/skin/icons/loading@2x.png");
  }
}

description > .text-link {
  margin: 0;
  padding: 0;
}

#submit-feedback {
  margin-inline-start: .9em;
}

.bottom-link {
  text-align: center;
  margin: 0 40px;
}

#currentChannel {
  margin: 0;
  padding: 0;
  font-weight: bold;
}

#updateBox {
  line-height: normal;
}

#icons > .icon {
  -moz-context-properties: fill;
  margin: 10px 5px;
  width: 16px;
  height: 16px;
}

#icons:not(.checkingForUpdates, .downloading, .applying, .restarting) > .update-throbber,
#icons:not(.noUpdatesFound) > .noUpdatesFound,
#icons:not(.apply) > .apply {
  display: none;
}

#icons > .noUpdatesFound {
  fill: #30e60b;
}

#icons > .apply {
  fill: white;
}