//
// User Card
// --------------------------------------------------


.user-card {
  background: @body-bg;
  border: 1px solid @gray-lighter;
  border-radius: @border-radius-large;
  margin-bottom: @line-height-computed;
  overflow: hidden;

  .user-card-bg-image{
    background: @body-bg;

    &>img {
      display: none;
    }
  }

  .user-details {
    padding: @padding-base-vertical @padding-base-horizontal;
    overflow: auto;

    .user-avatar {
      float: left;

      img {
        width: 60px;
        height: 60px;
      }
    }

    .user-name {
      margin-left: 76px;

      .item-title {
        font-size: @font-size-large;
      }
    }

    .user-subscript {
      margin-left: 76px;

      color: @text-muted;
      font-size: @font-size-base * 0.66;

      &>* {
        margin-right: 8px;

        .status-icon {
          width: 14px;
          height: 14px;

          margin-right: 2px;

          position: relative;
          bottom: 2px;

          font-size: 14px;
          line-height: 14px;
        }

        .status-icon.ui-preview {
          height: @font-size-base * 0.66;
          width: @font-size-base * 0.66;

          position: relative;
          bottom: -3px;
        }

        .status-label.ui-preview {
          height: @font-size-base * 0.66;
        }
      }
    }
  }

  .user-card-stats {
    border-top: 1px solid @gray-lighter;
    display: table;
    table-layout: fixed;
    width: 100%;

    ul {
      display: table-row;

      li {
        display: table-cell;
        padding: @padding-base-vertical @padding-base-horizontal;

        text-align: center;

        strong {
          font-size: @font-size-small;
        }

        small {
          margin-left: 3px;

          color: @text-muted;
          font-size: @font-size-small;
        }
      }
    }
  }
}

.user-card.ui-preview {
  .user-name .ui-preview-text {
    height: @font-size-large;
  }

  .user-subscript .ui-preview-text {
    height: @font-size-base * 0.66;

    position: relative;
    top: 0px;
  }

  .user-card-stats .ui-preview-text {
    height: @font-size-small;
    width: 14px;

    position: relative;
    top: 0px;

    font-size: @font-size-small;
    line-height: @font-size-small;
  }
}