@import '~base/sass/base/variables';
@import '~base/sass/base/functions';
@import '~base/sass/base/grid';
@import '~base/sass/base/stat-cards';

.user-content {
  padding: calcRem(40) 0 calcRem(70);

  @media (max-width: $tablet-breakpoint) {
    grid-template-columns: 1fr;
  }

  .user-information {
    grid-column-end: span 1;

    @media (max-width: $tablet-breakpoint) {
      padding: 0 calcRem(30);
    }

    .name {
      font-weight: bold;
      font-size: calcRem(24);
      margin-bottom: calcRem(30);
      line-height: 100%;
    }

    .user-details {
      padding: 0;
      margin: 0;
      width: 100%;

      li {
        border-top: calcRem(1) solid lighten($base-text-color, 75%);
        list-style-type: none;
        padding: calcRem(15) 0;
        display: flex;
        align-items: baseline;
        width: 100%;

        .label {
          display: block;
          font-size: calcRem(11);
          color: lighten($base-text-color, 20%);
          flex-shrink: 0;
          flex-grow: 0;
          width: calcRem(80);
          padding-right: calcRem(20);
        }

        .value {
          font-size: calcRem(14);
          flex-shrink: 1;
          flex-grow: 1;
          width: 100%;
        }
      }
    }
  }
}
