@import "../settings/colors";

@import "./avatar";


/* ---------- CARD MEMBER ---------- */
.card-member{
    background-color: $white;
    border-radius: 2px;
    box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18);
    color: $gray-2;
    width: 16.5rem;
    margin: .5rem 1rem .5rem 0;
    padding-left: 0;
    padding-right: 0;
    float: none;
    p {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .upper-panel {
      display: flex;
      align-items: center;
      .left-panel {
        @extend %user-img;
        height: 35px;
        width: 35px;
        margin: 1rem;
        .icon {
          line-height: 35px;
          &.icon-user {
            font-size: 30px;
            bottom: -5px;
          }
          &.icon-location {
            font-size: 16px;
          }
        }
      }
      .middle-panel {
        width: 10rem;
        .title {
          font-size: 16px;
          color: $black;
        }
      }
      .right-panel {
        .icon {
          color: $gray-1;
          font-size: 1.5rem;
          bottom: -5px;
          &.icon-exit {
            font-size: 1rem;
            margin-left: .65rem;
          }
        }
      }
    }
    .lower-panel {
      display: flex;
      flex-direction: column;
      max-height: 261px;
      overflow-y: auto;
      .sub-panel {
        flex: 0 0 auto;
        display: flex;
        flex-direction: row;
        margin: .5rem 2rem;
        &:first-of-type {
          margin-top: 1.5rem;
        }
        .description {
          display: flex;
          flex-direction: column;
        }
      }
      .remove {
        font-size: 14px;
        color: $red-base;
        margin: 0 2rem 1rem 2rem;
        font-family: $brand-font-light;
      }
    }
}
/* ---------- END CARD MEMBER ---------- */