/* 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/error-pages.css");

body {
  --warning-color: #ffa436;
}

@media (prefers-color-scheme: dark)  {
  body {
    --warning-color: #ffbd4f;
  }
}

@media (prefers-contrast) {
  body {
    --warning-color: var(--in-content-page-color);
  }
}

body.certerror {
  width: 100%;
}

/* Normally, setting e.g. `display: flex` overrides the hidden attribute.
 * This allows for element hiding to be controlled entirely in HTML & JS. */
[hidden] {
    display: none !important;
}

.title {
  font-size: 1.75em;
}

body.captiveportal .title {
  background-image: url("chrome://global/skin/in-content/wifi.svg");
}

body.certerror .title {
  background-image: url("chrome://global/skin/icons/warning.svg");
  color: var(--warning-color);
}

body.blocked .title {
  background-image: url("chrome://global/skin/icons/blocked.svg");
}

body.clockSkewError .title {
  background-image: none;
  background-repeat: no-repeat;
}

.title-text {
  font-weight: 300;
  line-height: 1.2;
}

/* Pressing the retry button will cause the cursor to flicker from a pointer to
 * not-allowed. Override the disabled cursor behaviour since we will never show
 * the button disabled as the initial state. */
button:disabled {
  cursor: pointer;
}

#errorWhatToDoTitle {
  font-weight: bold;
  margin-top: 2em;
}

#openInNewWindowContainer {
  margin-bottom: 0;
}

#advancedPanelButtonContainer {
  background-color: rgba(128, 128, 147, 0.1);
  display: flex;
  justify-content: end;
  padding: 5px;
  margin-top: 2em;
}

#certErrorAndCaptivePortalButtonContainer {
  display: flex;
}

#netErrorButtonContainer > button {
  margin-top: 1.2em;
}

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

#blockingErrorReporting {
  padding-bottom: 10px;
  /* Pull a bit closer to the top than the other .advanced-panel containers
   * as this is just a checkbox. */
  margin-top: 1.2em;
}

.advanced-panel-container {
  width: 100%;
  position: absolute;
  left: 0;
}

.trr-message-container {
  background-color: var(--in-content-box-background);
  border: 1px solid var(--in-content-box-border-color);
  border-radius: 4px;
  padding: 10px;
}

#badCertAdvancedPanel {
  background-color: var(--in-content-box-background);
  border: 1px solid var(--in-content-box-border-color);
}

.advanced-panel {
  margin: 48px auto;
  min-width: var(--in-content-container-min-width);
  max-width: var(--in-content-container-max-width);
}

#errorCode {
  white-space: nowrap;
}

#viewCertificate {
  margin: 0 3em;
}

#badCertTechnicalInfo {
  margin: 3em 3em 1em;
  overflow: auto;
  white-space: pre-wrap;
}

#certificateErrorDebugInformation {
  background-color: var(--in-content-box-info-background) !important;
  border-top: 1px solid var(--in-content-border-color);
  width: 100%;
  padding: 1em 3%;
  box-sizing: border-box;
}

#certificateErrorText {
  font-family: monospace;
  white-space: pre-wrap;
  padding: 1em 0;
  display: flex;
  flex-wrap: wrap;
}

#cert_domain_link:not([href]) {
  color: var(--in-content-page-color);
  text-decoration: none;
}

.clockSkewError .try-again {
  margin-top: 0.3em;
}

#errorLongDesc strong {
  font-weight: 600;
}

#errorShortDesc {
  font-size: 1.15em;
  line-height: 1.3;
  font-weight: 400;
  margin-top: 10px;
}

@media only screen and (max-width: 959px) {
  #certificateErrorText {
    /* The encoded certificate chain looks better when we're not
     * wrapping words on big screens, but at some point we need
     * to wrap to avoid overflowing */
    word-wrap: anywhere;
  }
}

@media only screen and (max-width: 480px) {
  #badCertTechnicalInfo {
    margin: 10px 10px 5px;
  }

  #viewCertificate {
    margin: 0 10px;
  }

  #errorCode {
    /* Break the error code to avoid long codes overflowing the screen */
    white-space: normal;
    word-wrap: anywhere;
  }
}

@media (max-width: 970px) {
  body.certerror .title {
    /* !important is necessary here until Bug 1723718 is resolved */
    background-image: url("chrome://global/skin/icons/warning.svg") !important;
    background-position: top left;
    padding-top: 60px;
    margin-top: -60px;
  }
  /* Reduce the negative margin on small viewport sizes to avoid exceeding the
   * 38px body vertical padding error-pages.css sets, leaving 8px space: */
  @media (max-height: 480px) {
    body.certerror .title {
      margin-top: -30px;
    }
  }

  body.certerror .title:dir(rtl) {
    background-position-x: right;
  }
}