@import 'settings';
@import 'settings--sky';

.socialblue--sky {
  .card--views__sidebar {

    .card__block {
      @include for-tablet-landscape-up {
        padding-left: 1.875rem;
        padding-right: 1.875rem;
      }
    }
  }

  section:not(.content-merged--sky) {
    .content-merged--sky--complementary {
      background: transparent;
      border-radius: 0 !important;
      box-shadow: none;
    }
  }

  // Content Merged.
  .card--content-merged {
    > h4 {
      margin-bottom: 1.25rem;

      @include for-tablet-landscape-up {
        font-size: 1.5rem;
      }
    }

    @include for-desktop-up {
      padding: .875rem 3.5rem 5.75rem;
    }

    .card--content-merged__list {
      display: flex;
      flex-direction: column;
      padding-top: 1.75rem;
      padding-bottom: 1.75rem;
      border-bottom: 2px solid #fafafa;

      @include for-tablet-portrait-up {
        flex-direction: row;
      }

      &:last-child {
        border-bottom: 0;
      }

      h5,
      .list-item__label {
        margin: 0 0 1rem;
        font-size: .875rem;
        text-align: center;
        align-self: center;

        @include for-tablet-portrait-up {
          flex: 0 0 200px;
          max-width: 200px;
          margin: 0;
          text-align: left;
          align-self: flex-start;
        }
      }

      .badge {
        text-align: left;
        white-space: normal;
      }

      .list-item__text {
        display: flex;
        flex-wrap: wrap;
      }

      .field--name-field-profile-self-introduction {
        .field--item {
          > *:not(:last-child) {
            margin-bottom: .75rem;
          }
        }
      }
    }
  }

  // Content merged for Sidebar.
  .content-merged--sky--complementary {
    @include for-tablet-landscape-down {
      margin-bottom: 0;
      border-radius: 0 !important;
      box-shadow: none;
    }
  }

  .content-merged--sky {
    .region--complementary {
      .card {
        margin-bottom: 0;

        > .card__title,
        > .card__actionbar {
          padding-top: 1.875rem;
        }
      }
    }

    .content-merged--sky--complementary {
      background: #fff;

      @include for-tablet-landscape-down {
        margin-bottom: 0;
      }
    }

    .region--complementary-top,
    .region--complementary-bottom {
      > *:not(.views-exposed-form),
      .off-canvas-xs-only {
        @include for-tablet-landscape-up {
          box-shadow: none !important;
        }
      }

      > *:not(.views-exposed-form) {
        position: relative;

        &:after {
          @include separate-line(#adadad) {
            top: 100%;
          };
        }

        &:last-child:after {
          display: none;
        }

        &.block-discussion-add-block,
        &.block-group-add-event-block,
        &.block-group-add-topic-block,
        &.block-group-add-book-block,
        &.block-group-add-idea-block,
        &.block-event-add-block,
        &.block-topic-add-block,
        &.block-group-add-block,
        &.block-social-idea,
        &.block-group-add-discussion-block,
        &.block-course-add-section {
          display: block;
          margin-top: 0;
          padding: 20px 1.875rem;

          @include for-tablet-portrait-up {
            padding-left: 2.25rem;
            padding-right: 2.25rem;
          }

          .btn {
            width: 100%;
            margin-bottom: 0;
          }
        }
      }
    }

    .region--complementary-top + .region--complementary-bottom {
      > .card:first-child:before {
        @include separate-line(#adadad) {
          bottom: 100%;
        };
      }
    }

    .block-profile-statistic-block,
    .block-group-statistic-block {
      box-shadow: none;
    }
  }

  // Statistic block.
  .block-profile-statistic-block,
  .block-group-statistic-block {
    position: relative;
    padding: 1rem 1.875rem 0;
    background: #fafafa;

    &:before {
      @include separate-line(#fafafa) {
        top: 100%;
        margin-top: -2px;
        z-index: 10;
      }
    }

    @include for-tablet-portrait-up {
      padding: 2.5rem 2.25rem 0;
    }

    @include for-tablet-landscape-down {
      margin-bottom: 0;
      border-radius: 0 !important;
      box-shadow: none;
    }

    .hero-footer__cta {
      display: block;
      position: static;
      padding: 0 0 1.25rem;
      margin: 0;

      @include for-tablet-portrait-up {
        flex: none;
        max-width: 100%;
        justify-content: center;
      }

      > * {
        &:not(.btn-group) {
          display: flex;
          width: 100%;
          justify-content: center;

          + * {
            margin-top: 1rem;
          }

          a.btn:nth-child(1):nth-last-child(1) {
            border-bottom-right-radius: 10px !important;
            border-top-right-radius: 10px !important;
          }
        }

        &.btn-group {
          display: flex;

          a.btn {
            flex: 1;
          }

          .btn {
            &.dropdown-toggle {
              margin-left: 10px;
              border-bottom-left-radius: 10px;
              border-top-left-radius: 10px;
            }
          }
        }
      }

      .btn-group + .btn-group {
        margin-top: 1rem;
      }
    }

    .follow-user-wrapper {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin-bottom: 1.75rem;

      @include for-phone-only {
        margin-bottom: 1rem;
      }

      > *:nth-child(1):nth-last-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }

      .flag-follow-user,
      .hero-footer__cta {
        flex: 0 0 100%;
        max-width: 100%;

        @include for-tablet-portrait-up {
          flex: 0 0 calc(50% - 5px);
          max-width: calc(50% - 5px);
        }

        * {
          justify-content: center;
        }

        a.btn {
          flex: 1;
        }
      }

      .flag-follow-user {
        position: relative;
        padding: 6px 12px;
        font-weight: 400;

        .js-flag-message {
          display: none;
        }

        .ajax-throbber {
          position: absolute;
          top: 4px;
          right: 10px;
        }

        @include for-phone-only {
          margin-bottom: .5rem;
        }

        @include for-tablet-portrait-up {
          margin-right: 5px;
        }
      }

      .hero-footer__cta {
        padding-bottom: 0;

        @include for-tablet-portrait-up {
          margin-left: 5px;
          padding-bottom: 0;
        }
      }

      > *:nth-child(1):nth-last-child(1) {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
      }
    }

    .card__actionbar {
      padding: 1.5rem 0;

      .card__link {
        float: none;
        margin-left: 0;
      }
    }
  }

  .block-profile-statistic-block {
    .card__info-user {
      .hero-avatar {
        border-color: #fafafa;
      }
    }
  }

  .block-group-statistic-block {
    .hero-footer__cta {
      > *.btn-group {
        .btn {
          &,
          &.dropdown-toggle {
            margin-left: 0;
          }
        }
      }
    }
  }

  .card__info-user {
    position: relative;
    width: 100%;
    margin-bottom: 1.875rem;
    padding-top: 0;
    padding-bottom: 1.25rem;
    text-align: center;

    @include for-phone-only {
      margin: 0  auto .75rem;
      padding-bottom: .75rem;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
    }

    &:after {
      content: '';
      position: absolute;
      height: 2px;
      bottom: 0;
      left: 0;
      right: 0;
      background: #000;

      @include for-phone-only {
        left: 1.5rem;
        right: 1.5rem;
      }
    }

    .hero-avatar {
      width: 160px;
      height: 160px;
      margin: -80px 0 5px;
      border: 10px solid;
      border-radius: 50%;
      box-shadow: none;

      @include for-phone-only {
        width: 100px;
        height: 100px;
        border-width: 5px;
        margin: -50px 0 10px;
      }
    }

    &--name {
      margin: 0 0 10px;
      font-size: 1.375rem;
      line-height: 24px;

      @include for-tablet-portrait-up {
        font-size: 2.25rem;
        font-weight: 700;
        line-height: 1.2;
      }
    }

    &--about {
      font-size: 1rem;
      line-height: 1.625rem;

      &-job,
      &-organization {
        font-size: .875rem;
        margin-bottom: 5px;

        @include for-tablet-portrait-up {
          font-size: 1.125rem;
          margin-bottom: 10px;
        }
      }

      &-address {
        color: #989b97;
        font-weight: 700;

        @include for-phone-only {
          font-size: .875rem;
          color: #b5b8b3;
          text-transform: uppercase;
        }

        p {
          margin-bottom: 0;
        }

        .field {
          max-width: 100%;
          margin-bottom: 0;
        }
      }
    }
  }

  .card__counter {
    padding-bottom: 1.25rem;

    @include for-phone-only {
      width: 100%;
      margin: 0 auto;
      padding: 0 1.25rem 1rem;
    }

    ul {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      list-style: none;
      margin: 0 -.5rem;
      padding: 0;
    }

    li {
      padding: 0 .5rem;
      flex: 0 0 33.333333%;
      max-width: 125px;
    }

    span {
      display: block;
      text-align: center;
    }

    &-quantity {
      font-size: 1.875rem;
      font-weight: 700;
      line-height: 28px;
      margin-bottom: 5px;

      @include for-phone-only {
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: 5px;
      }
    }

    &-text {
      font-size: .75rem;
      line-height: 1.2;

      @include for-phone-only {
        font-size: 11px;
      }
    }
  }

  // Info tab on the group page.
  .block-views-blockgroup-managers-block-list-managers,
  .view-group-information,
  .block-social-group-tags-block {
    .card,
    &.card {
      padding: 1.75rem 1.5rem;

      @include for-tablet-portrait-up {
        flex-direction: row;
      }

      @include for-tablet-landscape-up {
        padding-left: 2.5rem;
        padding-right: 2.5rem;
      }

      @include for-desktop-up {
        padding-left: 3.5rem;
        padding-right: 3.5rem;
      }

      .view--group-managers {
        padding: 0;
        margin-top: -.625rem;
      }

      > .card__title {
        margin-top: 0;
        padding: 0;
        margin-bottom: 1rem;

        @include for-tablet-portrait-up {
          text-align: left;
          flex: 0 0 200px;
          max-width: 200px;
          margin: 0;
        }
      }

      > .card__block,
      > .card__body {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
        padding: 0;
      }
    }
  }

  .block-social-group-tags-block.card {
    > .card__block {
      p {
        font-size: .875rem;
        margin: .75rem 0 .25rem;

        &:first-child,
        &:nth-child(1) {
          margin-top: 0;
        }
      }
    }
  }
}
