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

/* Whether this is actually still required
 * is not totally clear, but better to be safe than sorry:
 *
 * For some reason SubDialog browser sizing can result in scrollbars, so just
 * hide the horizontal scrollbar that would have then required vertical
 * scrollbar. This should be okay as we wrap content for this fixed width
 * dialog unless the window is actually narrow and really does need
 * horizontal scrollbars. */
@media (min-width: 544px) {
body {
  overflow-x: hidden;
}
}

body {
  padding: 20px 40px;
  /* Keep as multiple of 4px. Match min-width media query above + padding. */
  width: 464px;
}

#dialog-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  text-align: center;
}

.logo {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 8px;
}

#title {
  font-weight: 500;
  font-size: 26px;
  margin-bottom: 0;
  white-space: pre-wrap;
}

#content {
  font-weight: 400;
  font-size: 13px;
  margin-block: 10px 18px;
}

#learn-more-toggle::after {
  background: url("chrome://global/skin/icons/arrow-right.svg") center / 12px no-repeat;
  content: "";
  -moz-context-properties: fill;
  fill: currentColor;
  padding-inline: .5em;
}

#learn-more-toggle:dir(rtl)::after {
  background-image: url("chrome://global/skin/icons/arrow-left.svg");
}

#learn-more-toggle[aria-expanded="true"]::after {
  background-image: url("chrome://global/skin/icons/arrow-down.svg");
}

#learn-more-toggle[aria-expanded="false"] + .expanded {
  visibility: hidden;
}

.expanded {
  margin-bottom: 0;
}

#primary {
  font-size: 13px;
}

#secondary {
  /* make the font look like the mock */
  font-size: 13px;
  padding: 4px;
}