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

.home {
  display: flex;
  width: 100%;
  min-height: 100vh;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  line-height: 1.5;
}

.homeSpecialMessage {
  padding: 8px 16px;
  border: 1px solid #000;
  border-radius: 3px;
  margin: 17px 0;
  background-color: #798fc8;
  color: #fff;
}

.homeSection {
  position: relative;
  overflow: hidden;
  width: 75%;
  max-width: 1200px;
  box-sizing: border-box;
  padding: 4em 8em;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  box-shadow: 0 5px 25px #0b1f50;
  font-size: 130%;
}

.homeSection kbd {
  display: inline-block;
  padding: 0 0.5em;
  border: 1px solid #ccc;
  border-radius: 0.2em;
  margin: 0 0.2em;
  background-color: #f6f6f6;
  box-shadow: 0.1em 0.1em 0 #bbb;
}

.homeSectionItems {
  margin: 1em 0;
}

.homeSectionScreenshot {
  width: 390px;
  max-width: 100%;
  height: auto;
  border: 1px solid #d1d1d1;
  border-radius: 0.4em;
  box-shadow: 0 2px 4px #ddd;
  place-self: center;
}

.homeAdditionalContentTitle {
  margin-top: 0;
  margin-bottom: 10px;
  grid-column: 1 / -1; /* from start to end */
}

.homeActions > p:first-child,
.homeRecentUploadedRecordingsTitle {
  margin-top: 0;
}

.homeSectionButton {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em;
  border: 2px solid currentcolor;
  margin: 15px 0;
  background-color: #fff;
  color: var(--grey-50);
  font-size: 16px;
  font-weight: bold;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition:
    background-color 250ms var(--animation-curve),
    color 250ms var(--animation-curve);
}

.homeSectionButton:not(:disabled) {
  color: var(--blue-60);
  cursor: pointer;
}

.homeSectionLoadProfile {
  position: relative;
}

.homeSectionActionButtons {
  display: flex;
}

.homeSectionActionButtons .homeSectionButton {
  flex: 1;
  margin: 5px 0;
}

.homeSectionActionButtons button:not(:first-of-type) {
  border-left: none;
}

.homeSectionLoadFromUrl {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: space-between;
}

.homeSectionActionButtons .homeSectionButton,
.homeSectionLoadFromUrl .homeSectionButton {
  padding: 0.3em 1em;
  font-size: 13px;
}

.homeSectionButton:not(:disabled):hover,
.homeSectionButton:not(:disabled)[aria-expanded='true'] {
  background-color: var(--blue-60);
  color: #fff;
}

.homeSectionPlus {
  position: relative;
  top: 2px;
  padding-right: 12px;
  padding-left: 5px;
  font-size: 26px;
  line-height: 0;
}

.homeSectionDocsIcon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 10px -4px 3px;
  background: url(../../../res/img/svg/help-blue.svg);
  background-size: 100% 100%;
}

.homeSectionButton:hover .homeSectionDocsIcon {
  /* Make the icon white */
  filter: grayscale(1) brightness(3);
}

.homeInstructions,
.homeAdditionalContent {
  display: grid;
  margin-top: 30px;
  column-gap: 30px;

  /* minmax makes the grid ignore the element's intrinsic size.
   * If we use 1fr directly, the min is "auto", which depends on the content. If
   * the content is too large then this can break the layout. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.homeInstructionsTransitionGroup {
  position: relative;
}

/* Only show the home transition when reduced motion is not preferred */
@media (prefers-reduced-motion: no-preference) {
  .homeTransition-enter {
    opacity: 0.1;
    transform: translateX(100px);
  }

  .homeTransition-enter.homeTransition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition:
      opacity 300ms ease-out,
      transform 300ms ease-out;
  }
}

.homeSectionUploadFromFileInput {
  display: none;
}

.homeSectionLoadFromUrlInput {
  flex: auto;
  margin: 0 10px 0 0;
}

.homeSectionLoadFromUrlSubmitButton {
  margin: 0;
}

@media (max-width: 1300px) {
  .homeSection {
    padding: 5em;
  }
}

@media (max-width: 1100px) {
  .homeSection {
    max-width: 80%;
    padding: 3em;
  }

  .homeAdditionalContent,
  .homeInstructions {
    /* we switch to use just one column instead of 2.
     * Note tha/ minmax makes the grid ignore the element's intrinsic size. */
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 767px) {
  .homeSection {
    width: 90%;
    max-width: 90%;
    padding-right: 2em;
    padding-left: 2em;
  }
}

@media (max-width: 499px) {
  .homeSection {
    width: 95%;
    max-width: 95%;
    padding-right: 1em;
    padding-left: 1em;
  }
}
