/// jobs.less -- Main layout for the 'job listing' page

// main layout content container

#jobs() {
  .search-filter-content {
    > .category-selector {
      margin: 1.5em 0;
    }

    > .rating-label , > .selection-label {
      padding: 1em;
      color: white;
      font-weight: bold;
    }

    > .ethlance-component-rating {
      padding: 1em;
      padding-top: 0;
    }

    > .currency-input {
      padding: 1em;
    }

    > .feedback-input {
      padding: 1em;
      > .ethlance-text-input {
        padding: 0.5em 0;
      }
    }

    > .ethlance-select-input {
      padding: 1em 0;
    }
  }
}

.jobs-main-container {
  #mixin.main-container();

  > .job-search-filter {
    #mixin.main-container.search-filter();
    #jobs.search-filter-content();
  }

  > .mobile-search-filter {
    > .content {
      #jobs.search-filter-content();

      > .ethlance-select-input {
        padding-bottom: 16em;
      }
    }
  }

  > .job-listing {
    #mixin.main-container.listing();

    > .search-container {
      > .ethlance-chip-search-input {
        margin: 2em;
        max-width: 100vw;

        @media #media[tablet-query] {
          margin: 1.5em;
        }

        @media #media[mobile-query] {
          margin: 0.0em;
        }
      }
    }

    > .job-element {
      #mixin.box-shadow.item-inset();
      display: grid;
      grid-template-areas:
        'title          details'
          'description    details'
          'date           details'
          'tags           details'
          'users          users';
      grid-template-rows: repeat(5, auto);
      grid-template-columns: 2fr 1fr;
      padding: 2em;

      @media #media[mobile-query] {
        grid-template-areas:
          'title'
            'description'
            'date'
            'tags'
            'users'
            'details';
        grid-template-rows: repeat(6, auto);
        grid-template-columns: 100%;
        padding: 0.7em;
      }

      > .title {
        display: flex;
        align-items: center;
        grid-area: title;
        font-size: 2em;
        font-weight: 500;
        margin: 0.5em 0;
        line-height: 1.2em;

        @media #media[mobile-query] {
          font-size: 2.5em;

          // To truncate job titles at 2 lines on mobiles (terminating with ...)
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }

      > .description {
        margin: 1em 0;
        margin-right: 0.7em;
        grid-area: description;
        line-height: 1.4em;
        @media #media[desktop-query] {
          font-size: 0.9em;
        }

        @media #media[mobile-query] {
          margin: 1em 0.5em;
        }
      }

      > .date {
        grid-area: date;
        font-weight: 200;
        font-size: 0.9em;
        margin: 1.0em 0;

        @media #media[mobile-query] {
          margin-bottom: 2em;
        }
      }

      > .tags {
        grid-area: tags;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0.3em 0;

        > .ethlance-tag {
          cursor: pointer;
          margin: 0 0.5em 0.3em 0;
        }
      }

      > .users {
        grid-area: users;
        display: flex;
        flex-direction: row;
        margin: 2em 1em;

        @media #media[mobile-query] {
          margin: 1em;
          flex-direction: column;
        }

        > .user-detail {
          position: relative;
          display: grid;
          margin-right: 2em;
          grid-template-areas:
            'name'
            'rating-container'
            'location';
          grid-template-rows: repeat(3, auto);

          @media #media[mobile-query] {
            margin-right: 0;
            &:first-child {
              margin-bottom: 1.5em;
            }
          }

          > .name {
            grid-area: name;
            display: flex;
            margin: 1em 0;
            align-items: center;
            font-weight: 700;
          }

          > .rating-container {
            display: flex;
            grid-area: rating-container;
            justify-content: flex-start;
            align-items: center;

            > .ethlance-rating {
              display: flex;
              grid-area: rating;
              align-items: center;
            }

            > .rating-label {
              display: flex;
              grid-area: rating-label;
              align-items: cetner;
            }
          }

          > .location {
            margin: 1em 0;
            grid-area: location;
          }

          > .ethlance-inline-svg {
            position: absolute;
            margin: 1em 0;
            top: 0em;
            left: -1.5em;
            width: 16px;
            height: 16px;
            path {
              opacity: 1; /* for some reason, some of the SVGs have opacity:0 */
            }
          }
        }
      }

      > .details {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding-top: 1em;
        grid-area: details;

        @media #media[mobile-query] {
          align-items: center;
          margin-bottom: 2em;
        }

        > .job-detail-table {
          #mixin.detail-table();
          width: 90%;
        }
      }
    }
  }
}
