/*------------------------------------*\
  # INDEX.MD STYLING
  # the launchpad and searchbar
\*------------------------------------*/

.launchpad {
   width: 70%;

   grid-column: span 12 / auto;
   display: grid;
   grid-gap: 56px;

   margin-left: auto;
   margin-right: auto;
   padding: 56px 0;
}

// The section containing the search form.
.launchpad-search {
   grid-column: span 12 / auto;

   padding: 36px 44px;

   background-color: $color-launchpad_search;
   border: 1px solid $color-launchpad_search_border;
   border-radius: 1.5rem;
}

// The elements within the search form itself.
.launchpad-search label {
   font-family: $fontfamily-header;
   font-size: $fontsize-larger;
}

.launchpad-searchbar {
   width: 60%;
   padding: 12px 16px;

   border-radius: 1rem;

   font-size: $fontsize-body;
}

.launchpad-search_submit {
   padding: 12px 20px;
   appearance: none;
   outline: none;

   background: $color-launchpad_search_submit;
   border: 0;
   border-radius: 1rem;

   font-size: $fontsize-body;

   transition: $transition;

   &:hover {
      box-shadow: 0 0 7px $color-launchpad_search_submit_hover;
      transition: $transition;
   }
   &:focus {
      box-shadow: 0 0 7px $color-launchpad_search_submit_focus;
      transition: $transition;
   }
}

.launchpad-projects {
   grid-column: span 12 / auto;

   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-gap: 32px;
}



/*------------------------------------*\
  # !IF MULTIPLE PROJECTS ARE SHOWN
\*------------------------------------*/

.launchpad-card {
   grid-column: span 4 / auto;

   padding: 36px 28px 28px;

   border-radius: 1.5rem;
   border: 1px solid $color-project_card_border;

   text-decoration: none;
   color: $color-body_text;

   transition: $transition;

   header {
      margin-top: 1rem;

      font-family: $fontfamily-header;
      font-size: $fontsize-med;
   }

   .project-icon {
      padding: 1rem;

      border-radius: 3rem;
      background-color: $color-project_card_icon;

      color: #ffffff;
      font-size: $fontsize-med;

      transition: $transition;
   }
}

.launchpad-card:link {
   color: $color-body_text;
}

.launchpad-card:hover {
   border: 1px solid transparent;
   box-shadow: 0 0 6px $color-project_card_hover_shadow;

   transition: $transition;

   .project-icon {
      background-color: $color-project_card_icon_hover;

      color: $color-project_card_icon;

      transition: $transition;
   }
   color: $color-body_text;
}

.launchpad-card:visited {
   color: $color-body_text;
}



/*------------------------------------*\
  # !IF ONLY ONE PROJECT IS SHOWN
\*------------------------------------*/

.launchpad-card_wiki {
   background-color: $color-wiki_card_background;
   border-radius: 1.5rem;
   border: 1px solid $color-wiki_card_border;
}

.launchpad-card_wiki:hover {
   border: 1px solid transparent;
   box-shadow: 0 0 6px $color-wiki_card_hover_shadow;

   transition: $transition;

   .project-icon {
      background-color: $color-paper_light;

      color: $color-project_card_icon;

      transition: $transition;
   }
}