/* Copyright 2017 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

body {
  -webkit-font-smoothing: antialiased;
  font-size: 100%;
  margin: 0;
}

/** Typography -------------------------------------------------------------- */

.content {
  /* This is identical to the default background color. It's necessary to set it
     for the case when a theme with a background image is installed. */
  background-color: rgb(50, 54, 57);
  color: rgb(189, 193, 198);
  font-size: calc(100% - 2px);
  line-height: calc(100% + 6px);
  min-width: 240px;
}

h1 {
  color: rgb(218, 220, 224);
  font-size: calc(100% + 8px);
  font-weight: 400;
  line-height: calc(100% + 8px);
}

em {
  color: white;
  font-style: normal;
}

.learn-more-button {
  color: rgb(138, 180, 248);
  text-decoration: none;
}

/* Small font on small screens. */
@media (max-width: 240px),
       (max-height: 320px) {
  .content {
    font-size: calc(100% - 4px);
    line-height: calc(100% + 6px);
  }

  h1 {
    font-size: calc(100% + 4px);
    line-height: calc(100% + 4px);
  }
}

/** Icon -------------------------------------------------------------------- */

.icon {
  content: url(../../../../ui/webui/resources/images/incognito_splash.svg);
  height: 120px;
  width: 120px;
}

/* Medium-sized icon on medium-sized screens. */
@media (max-height: 480px),
       (max-width: 720px) {
  .icon {
    height: 72px;
    width: 72px;
  }
}

/* Very small icon on very small screens. */
@media (max-width: 720px) {
  @media (max-width: 240px),
         (max-height: 480px) {
    .icon {
      height: 48px;
      width: 48px;
    }
  }
}

/** The "Learn more" link --------------------------------------------------- */

/* By default, we only show the inline "Learn more" link. */
.content > .learn-more-button {
  display: none;
}

/* On narrow screens, we show the standalone "Learn more" link. */
@media (max-width: 720px) {
  #subtitle > .learn-more-button {
    display: none;
  }

  .content > .learn-more-button {
    display: block;
  }
}

/** Layout ------------------------------------------------------------------ */

/* Align the content, icon, and title to to the center. */
.content {
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.icon {
  margin-left: auto;
  margin-right: auto;
}

h1 {
  text-align: center;
}

/* Align the two columns of bulletpoints next to each other. */
.bulletpoints {
  float: left;
}

html[dir=rtl] .bulletpoints {
  float: right;
}

.bulletpoints + .bulletpoints {
  clear: right;
}

html[dir=rtl] .bulletpoints + .bulletpoints {
  clear: left;
}

.clearer {
  clear: both;
}

/* On narrow screens, align everything to the left. */
@media (max-width: 720px) {
  .content {
    max-width: 600px !important;  /* must override the rule set by JS which
                                   * is only valid for width > 720px cases. */
    text-align: start;
  }

  .icon {
    margin-inline-start: 0;
  }

  h1 {
    text-align: start;
  }

  .bulletpoints + .bulletpoints,
  html[dir=rtl] .bulletpoints + .bulletpoints {
    clear: both;
  }
}

/** Paddings and margins ---------------------------------------------------- */

.bulletpoints ul {
  margin: 4px 0 0;
  padding-inline-start: 16px;
}

/* Margins of floating elements don't collapse. The margin for bulletpoints
 * will usually be provided by a neighboring element. */
.bulletpoints {
  margin: 0;
}

.bulletpoints + .bulletpoints {
  margin-inline-start: 40px;
}

.bulletpoints + .bulletpoints.too-wide {
  margin-inline-start: 0;
  margin-top: 1.5rem;
}

/* Wide screens. */
@media (min-width: 720px) {
  .icon,
  h1,
  #subtitle,
  .learn-more-button {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
  }

  .content {
    margin-top: 40px;
    min-width: 240px;
    padding: 8px 48px 24px;
  }

  /* Snap the content box to the whole height on short screens. */
  @media (max-height: 480px) {
    html,
    body,
    .content {
      height: 100%;
    }

    .content {
      margin-bottom: 0;
      margin-top: 0;
      padding-bottom: 0;
      padding-top: 0;
    }

    .icon {
      margin-top: 0;
      padding-top: 32px;  /* Define the top offset through the icon's padding,
                           * otherwise the screen height would be 100% + 32px */
    }
  }

  /* Smaller vertical margins on very short screens. */
  @media (max-height: 320px) {
    h1,
    #subtitle,
    .learn-more-button {
      margin-bottom: 16px;
      margin-top: 16px;
    }

    .icon {
      margin-bottom: 16px;
    }
  }
}

/* Narrow screens */
@media (max-width: 720px) {
  .content {
    padding: 72px 32px;
    min-width: 176px;
  }

  .icon,
  h1,
  #subtitle,
  .learn-more-button {
    margin-bottom: 1.5rem;
    margin-top: 1.5rem;
  }

  /* The two columns of bulletpoints are moved under each other. */
  .bulletpoints + .bulletpoints {
    margin-inline-start: 0;
    margin-top: 1.5rem;
  }

  /* Smaller offsets on smaller screens. */
  @media (max-height: 600px) {
    .content {
      padding-top: 48px;
    }

    .icon,
    h1,
    #subtitle,
    .learn-more-button {
      margin-bottom: 1rem;
      margin-top: 1rem;
    }

    .bulletpoints + .bulletpoints {
      margin-top: 1rem;
    }
  }

  /* Small top offset on very small screens. */
  @media (max-height: 480px) {
    .content {
      padding-top: 32px;
    }
  }

  /* Undo the first and last elements margins. */
  .icon {
    margin-top: 0;
  }

  .learn-more-button {
    margin-bottom: 0;
  }
}

/* Very narrow screens. */
@media (max-width: 240px) {
  .content {
    min-width: 192px;
    padding-left: 24px;
    padding-right: 24px;
  }
}