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

.uploadedRecordingsHome {
  /* Box */
  width: 95%;
  max-width: 900px;
  box-sizing: border-box;
  padding: 3em 1em;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin: auto;

  /* Other */
  background: #fff;
  box-shadow: 0 5px 25px #0b1f50;
  font-size: 13px;
  line-height: 1.5;
}

/* In larger screens, we remove the flex characteristics but force some width
 * for the first element.
 * We also add some more padding and change how the width is computed.
 *
 * These values seemed like the right values when testing on Linux. Fonts
 * are usually larger on Linux for the profiler, so in other OSes we could
 * decide that the value is too large, but this is fine. */

@media (min-width: 600px) {
  .uploadedRecordingsHome .profileMetaInfoSummaryProductAndVersion,
  .uploadedRecordingsHome .profileMetaInfoSummaryPlatform {
    flex: none;
  }

  .uploadedRecordingsHome .profileMetaInfoSummaryProductAndVersion {
    min-width: 8.5em; /* This tries to align the second element, but we allow it to grow if necessary */
  }
}

@media (min-width: 750px) {
  .uploadedRecordingsHome {
    width: 90%;
    padding: 6%;
  }
}

@media (min-width: 1000px) {
  .uploadedRecordingsHome {
    width: 75%;
    padding: 6em;
  }
}
