/**
 * Styles for profiles
 *  - profile cards
 *  - profile list items
 */
@import (reference) "avatars";
@import (reference) "colors";
@import (reference) "fonts";
@import (reference) "cards";
@import (reference) "list-items";

.profile {
  &.card {
    padding: 0;
    @cover-image-size: 125px;
    height: 330px;

    .profile__cover-image {
      &:before {
        content: '';
        background: @color--black;
        height: @cover-image-size;
        width: 100%;
        top: 0;
        left: 0;
        opacity: 0.45;
        position: absolute;
      }

      height: @cover-image-size;
      width: 100%;
      background-size: cover;
      background-position: 50%;
      display: flex;
      align-items: flex-end;
      padding: @card--padding;
      padding-bottom: 0;
      box-sizing: border-box;
    }

    .profile__avatar {
      .avatarer(@avatar-size-sm);
      flex-shrink: 0;
      bottom: -@avatar-size-sm / 2;
    }

    .card__name {
      font-size: @font-size--body-md;
      color: @color--white;
      display: inline-block;
      position: relative;
      word-wrap: break-word;
      padding-left: @card--padding;
    }

    .card__caption {
      &:before {
        content: "\E898";
        font-size: 1rem !important;
        line-height: 1rem;
        color: @color--gray-light;
        margin-right: 5px;
      }

      display: inline-block;
      width: calc(~"100% - 85px");
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      position: relative;
      margin-left: calc(~"40px + 2rem");
      margin-top: 0.25rem;
    }

    .card__description { padding: @card--padding; }
  }
}