@include moz-document(
  url-prefix "about:neterror",
  url-prefix "about:restartrequired",
  url "chrome://browser/content/aboutRestartRequired.xhtml",
  url "about:sessionrestore",
  url "chrome://browser/content/aboutSessionRestore.xhtml"
) {
  /* Illustrations Position */
  #errorPageContainer,
  .neterror > .container,
  .description-wrapper {
    min-height: 300px;
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 38%;
    background-image: var(--uc-error-llustration);
  }

  #errorPageContainer {
    display: flex;
    flex-direction: column;
  }
  .description-wrapper {
    padding-inline-start: 38%;
  }

  /* Container */
  .container {
    min-width: var(--in-content-container-min-width); /* 13em */
    max-width: var(--in-content-container-max-width); /* 52em */
  }

  /* Text Position */
  #text-container {
    margin: auto;
    padding-inline-start: 38%;
  }
}


//-- Mixin ---------------------------------------------------------------------
@mixin _errorContainerImage($imgURL) {
  :root {
    --uc-error-llustration: url(#{$imgURL});
  }
  #errorPageContainer,
  .neterror > .container {
    @content;
  }
}

@mixin _errorDescriptionImage($imgURL) {
  :root {
    --uc-error-llustration: url(#{$imgURL});
  }
  .description-wrapper {
    @content;
  }
}

@mixin _errorTitleImage($imgURL) {
  @media (min-width: 970px) {
    .title {
      background-image: url($imgURL) !important;
      @content;
    }
  }
}

//------------------------------------------------------------------------------

@include moz-document(
  url-prefix "about:neterror?e=connectionFailure",
  url-prefix "about:neterror?e=netInterrupt",
  url-prefix "about:neterror?e=netReset",
  url-prefix "about:neterror?e=netTimeout",
  url-prefix "about:neterror?e=netOffline",
  url-prefix "about:restartrequired",
  url "chrome://browser/content/aboutRestartRequired.xhtml"
) {
  @include _errorContainerImage("../icons/error-connection-failure.svg");
}
@include moz-document(url-prefix "about:neterror?e=dnsNotFound") {
  @include _errorContainerImage("../icons/error-server-not-found.svg");
}
@include moz-document(
  url-prefix "about:neterror?e=blockedByPolicy",
  url-prefix "about:neterror?e=deniedPortAccess",
  url-prefix "about:neterror?e=malformedURI"
) {
  @include _errorContainerImage("chrome://browser/skin/illustrations/error-malformed-url.svg");
}
@include moz-document(
  url-prefix "about:neterror?e=clockSkewError",
  url-prefix "about:neterror?e=nssFailure"
) {
  @include _errorContainerImage("../icons/blue-berror.svg") {
    background-size: 18.5em;
  }
}

@include moz-document(url "about:sessionrestore" , url "chrome://browser/content/aboutSessionRestore.xhtml") {
  @include _errorDescriptionImage("../icons/error-session-restore.svg");
}

@include moz-document(url-prefix "about:neterror?e=fileNotFound") {
  @include _errorTitleImage("chrome://global/skin/icons/info.svg");

  #text-container {
    padding-inline-start: 0;
  }
}
@include moz-document(url-prefix "about:tabcrashed") {
  @include _errorTitleImage("chrome://browser/skin/tab-crashed.svg");
}
@include moz-document(url "about:robots", url "chrome://browser/content/aboutRobots.xhtml") {
  @include _errorTitleImage("chrome://browser/content/aboutRobots-icon.png");
}
@include moz-document(url "about:welcomeBack", url "chrome://browser/content/aboutWelcomeBack.xhtml") {
  @include _errorTitleImage("../icons/welcome-back.svg");
}

@include moz-document(url-prefix "about:preferences") {
  #no-results-message::after {
    content: url("../icons/no-search-results.svg");
    width: 380px;
    height: 293px;
    margin-top: 64px;
    margin-inline: auto;
  }
}
