/* 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";
#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 {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#leftBox {
  background-image: image-set(url("chrome://branding/content/about-logo.png"), url("chrome://branding/content/about-logo@2x.png") 2x);
  background-repeat: no-repeat;
  background-size: 192px auto;
  background-position: center 40px;
  /* min-width and min-height create room for the logo; logo is 192px tall w/
   40px above it, this leaves 8px on the bottom at the minimum height */
  min-width: 210px;
  min-height: 240px;
  margin-top: 20px;
  margin-inline-start: 30px;
}

#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;
  /* 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;
  flex: 1 auto;
}
#rightBox:-moz-locale-dir(rtl) {
  background-position: 100% 0;
}

#clientBox {
  flex: 1 0 auto;
  padding: 10px 0 15px;
}

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

#updateInfo {
  display: grid;
  grid-row-start: 1;
  grid-row-end: 4;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
}

#updateDeck {
  align-items: center;
}
#updateDeck description {
  margin: 0;
}

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

.text-link {
  color: inherit !important;
  text-decoration: underline;
}
description > .text-link {
  margin: 0;
  padding: 0;
}

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

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

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

#updateBox {
  line-height: normal;
  display: grid;
}

#updateIcon {
  display: none;
  align-self: center;
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 1;
  grid-column-end: 2;
  -moz-context-properties: fill;
  fill: currentColor;
  width: 16px;
  height: 16px;
  margin-inline: 5px;
}
#updateIcon.noUpdatesFound {
  display: block;
  content: url("chrome://global/skin/icons/check.svg");
  fill: #30e60b;
}
#updateIcon.apply {
  display: block;
  content: url("chrome://global/skin/icons/reload.svg");
}
#updateIcon:is(.checkingForUpdates, .downloading, .applying, .restarting) {
  display: block;
  content: url("chrome://global/skin/icons/loading.svg");
}

/*# sourceMappingURL=aboutDialog.css.map */
