// Relies on @mixin module-search-input from _ModuleSearch.scss

.add-data {
  // This is the "+ ADD DATA" button or <Step>. .add-data-modal isn't
  // styled here because it's in a portal.
  .add-data-button {
    @include add-module-button-container;

    & > button {
      @include button-blue; // the user _must_ click this button :)
    }
  }
}

.add-data-modal {
  // renders atop the selected pane
  // Cover the entire pane
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  // Center contents (no matter their size)
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: $WF-background;

  header {
    // this header is designed to not look like a modal, in order to cover and better integrate the WF
    display: block;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding: 2rem;
    background-color: $WF-background;
    color: $brand-text--dark;
    border-bottom: 1px solid $item-border;

    .title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 1.5rem;

      h5,
      .modal-title {
        @include title-2;
        margin: 0 2rem 0 0;
      }

      .close {
        cursor: pointer;
        font-size: 3rem;
        color: $document-blue;
        &:hover {
          color: $brand-text--dark;
        }
      }
    }

    .search {
      //TODO Create a new class of search field that is slightly bigger than the ones in the WF -- this type would be used to search for lessons, content, assets across the platform etc.
      width: 45rem;
      margin: 0 auto;
      flex: 0 0 auto;
      @include module-search-field;
      @include content-3;

      &::before {
        top: 0.7rem;
        font-size: 1.7rem;
        color: $document-blue;
        opacity: 0.5;
      }

      input {
        padding: 1rem 4rem;
        background: white;
        height: 3.5rem;
        border-color: $item-border;
      }

      button.reset {
        top: 0.9rem;
        margin-right: 0.5rem;
        font-size: 1.6rem;
        color: $document-blue;
        &:hover {
          color: darken($document-blue, 15%);
        }
      }
    }
  }

  .body {
    @include content-1;
    width: 100%;
    flex: 1 1 auto; // take the remaining space
    overflow: auto; // scrollbar
    padding: 2rem 7rem 5rem 7rem;
  }

  .modules {
    // display as columns
    display: grid;
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(28rem, auto));
    justify-content: center;

    &.no-results {
      p {
        text-align: center;
        margin: 5rem;
        @include title-2;
      }
    }

    a {
      grid-column-start: auto;
      grid-row-start: auto;
      width: 28rem;
      height: 15rem; // set fixed height to keep constrain design. users will have to fit guide
      font: inherit;
      background-color: white;
      color: inherit;
      box-shadow: none;
      border-radius: 0.5rem;
      border: 1px solid $item-border;
      padding: 2rem;
      display: flex; // icon to left of title
      //box-shadow: $button-area;
      position: relative;
      box-shadow: $button-area;

      &:hover {
        box-shadow: $button-area--hover;
        top: -3px;
      }

      &.lesson-highlight {
        border: 2px solid $brand-learn;
      }

      i {
        font-size: 1.8rem;
        margin-right: 1rem;
      }

      h4 {
        font-size: 1.4rem;
        font-weight: bold;
        align-items: center;
        margin-bottom: 1rem;
        line-height: 2rem;
      }

      p {
        //margin-left: -2.5rem;
      }

      &:hover {
        text-decoration: none;
        h4 span {
          text-decoration: underline;
        }
      }
    }
  }
}
