/* 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/in-content/common.css");

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 300;
}

body.private .showNormal,
body.normal .showPrivate,
body[tpEnabled] .showTpDisabled,
body:not([tpEnabled]) .showTpEnabled {
  display: none !important;
}
body[globalTpEnabled] .showGlobalTpDisabled {
  display: none !important;
}

@media screen and (min-width: 1200px) and (min-height: 700px) {
  body.private {
    font-size: 1.25em;
  }
}

#bar {
  align-self: stretch;
  background: url("chrome://browser/skin/privatebrowsing/mask.svg") no-repeat 22px 50%,
              #8d20ae;
  background-size: 47px 26px;
  padding-inline-start: 87px;
  color: white;
  font-size: 1.5em;
  font-weight: 200;
  line-height: 2.5em;
}

#bar:-moz-dir(rtl) {
  background-position: right 22px top 50%;
}

#main {
  padding: 0 2em;
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.sectionHeader {
  font-size: 1.75em;
}

/* PRIVATE BROWSING SECTION */

#privateBrowsingSection {
  margin: 1em;
  padding: 0 1em;
}

ul {
  margin: 0;
  padding-inline-start: 8px;
}

li {
  list-style: none;
  padding-inline-start: 24px;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: 0 50%;
}

li:-moz-dir(rtl) {
  background-position: 100% 50%;
}

#forgotten > li {
  background-image: url("chrome://browser/skin/privatebrowsing/check.png");
}

#kept > li {
  background-image: url("chrome://browser/skin/privatebrowsing/attention.png");
}

@media (min-resolution: 1.1dppx) {
  #forgotten li {
    background-image: url("chrome://browser/skin/privatebrowsing/check@2x.png");
  }

  #kept li {
    background-image: url("chrome://browser/skin/privatebrowsing/attention@2x.png");
  }
}

#list-area {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
}

#list-area > div {
  margin-inline-end: 3em;
}

.list-header {
  margin-bottom: 0.4em;
  font-weight: bold;
}

/* TRACKING PROTECTION SECTION */

#trackingProtectionSection {
  margin: 1em;
  padding: 1em;
  text-align: center;
  border: lightgray 2px solid;
  border-radius: 10px;
}

#tpEnabled,
#tpDisabled {
  display: inline-block;
  margin-inline-start: 0.5em;
  border-radius: 3px;
  padding: 0.1em;
  color: white;
  font-size: 0.78em;
  font-weight: bold;
}

#tpEnabled {
  background-color: #6fbe4a;
}

#tpDisabled {
  background-color: #c33b32;
}

#tpDiagram {
  margin-left: auto;
  margin-right: auto;
  width: 145px;
  height: 90px;
  background: url("chrome://browser/skin/privatebrowsing/shield-page.png") no-repeat;
  background-size: 145px 90px;
}

@media (min-resolution: 1.1dppx) {
  #tpDiagram {
    background-image: url("chrome://browser/skin/privatebrowsing/shield-page@2x.png");
  }
}

#tpStartTour {
  margin-bottom: 0;
}

#startTour {
  display: block;
  border-radius: 2px;
  background-color: var(--in-content-primary-button-background);
  color: var(--in-content-selected-text);
  padding: 0.1em 0.3em;
  line-height: 2.25em;
  text-decoration: none;
}

#startTour:hover {
  background-color: var(--in-content-primary-button-background-hover);
}

#startTour:hover:active {
  background-color: var(--in-content-primary-button-background-active);
}

#startTour:-moz-focusring {
  outline: 1px dotted var(--in-content-border-focus);
}

#enableTrackingProtection,
#disableTrackingProtection {
  font-size: 0.875em;
  cursor: pointer;
}