/// profile.less -- User Profile Pages styling


.profile-main-container {
  > .tabular-layout > .active-page {
    // remove default styling, since we're dealing with several paper sections in the active page
    #mixin.box-shadow.none();
    background-color: transparent;
    border-radius: 0;

    > .candidate-profile , > .employer-profile , > .arbiter-profile {
      #mixin.box-shadow.main();
      background-color: white;
      border-bottom-left-radius: 0.7em;
      border-bottom-right-radius: 0.7em;
      padding: 3em;

      display: grid;
      grid-template-areas:
        'title          title'
        'biography      detail-listing'
        'rating         detail-listing'
        'location       detail-listing'
        'button-listing detail-listing';

      grid-template-rows: repeat(5, auto);
      grid-template-columns: 5fr 2fr;

      @media #media[tablet-query] {
        grid-template-areas:
         'title'
           'biography'
           'rating'
           'location'
           'detail-listing'
           'button-listing';
        grid-template-rows: repeat(6, auto);
        grid-template-columns: auto;
      }

      @media #media[mobile-query] {
        padding: 1.5em;
      }

      > .title {
        width: 100%;
        grid-area: title;
        display: grid;
        grid-template-areas:
          'profile-image name edit-button'
          'profile-image detail edit-button';
        grid-template-columns: 72px auto max-content;
        grid-template-rows: auto auto;

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

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

        > .name {
          grid-area: name;
          font-size: 2.2em;
          font-weight: 700;
          padding: 0.5em;
        }

        > .detail {
          grid-area: detail;
          font-size: 0.9em;
          font-weight: 300;
          padding: 0.5em 1.4em;

        }

        > .edit-button {
          grid-area: edit-button;
          align-self: start;
          justify-self: end;
          padding-top: 0.5em;
        }
      }

      > .biography {
        grid-area: biography;
        padding: 1.2em 0;
        padding-right: 1em;
        font-size: 1.2em;
        line-height: 1.5em;
        white-space: pre-wrap;
      }

      > .detail-listing {
        grid-area: detail-listing;

        // defaults for each of the detail listings.
        .listings() {
          display: flex;
          flex-direction: column;
          margin: 1em 0.5em;
          margin-right: 0;

          > span {
            font-weight: 700;
            font-size: 1.1em;
            padding: 1em 0;
          }

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

        > .languages , > .skills {
          .listings();
        }
      }

      > .rating {
        grid-area: rating;
        display: flex;
        align-items: center;
        margin: 1em 1em;

        > span {
          padding: 0 0.5em;
        }
      }

      > .location {
        grid-area: location;
        margin: 1em 1em;
        margin-top: 0;
        font-weight: 400;
      }

      > .button-listing {
        grid-area: button-listing;
        display: flex;
        align-items: center;
        margin: 1em 0;

        @media #media[tablet-query] {
          justify-content: space-around;
        }

        > .button {
          margin: 0 0.5em;

          @media #media[tablet-query] {
            width: 40%;
          }

          &:first-child {
            margin-left: 0;
          }

          > .button-icon-label > .label {
            font-size: 1.2em;
          }
        }
      }
    }

    .default-listing() {
      display: flex;
      flex-direction: column;
      #mixin.paper-1();
      margin: 1em 0;
      padding: 3em 3em;
    }

    > .job-listing {
      .default-listing();

      > .title {
        font-size: 1.5em;
        font-weight: 400;
        color: #color[secondary-accent];
        padding: 0.5em 0;
      }

      > .scrollable {
        > .ethlance-table {
          width: 600px;
        }
      }

      > .button-listing {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        padding: 1em 0;

        @media #media[tablet-query] {
          justify-content: center;
        }

        > .ethlance-circle-button {
          margin: 0.5em;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }

    > .feedback-listing {
      .default-listing();
      text-align: center;
      margin-left: 0;
      margin-right: 0;
      padding-left: 0;
      padding-right: 0;

      > .title {
        font-size: 1.5em;
        font-weight: 400;
        color: #color[secondary-accent];
        padding: 0.5em 0;
      }

      > .sub-title {
        margin: 0.5em 0;
        margin-bottom: 1.5em;
      }
    }
  }
}
