@import '../colors/settings';
@import './avatar';

/* ---------- CARD MEMBER ---------- */
.card-member {
  float: none;
  width: 16.5rem;
  padding-right: 0;
  padding-left: 0;
  margin: 0.5rem 1rem 0.5rem 0;
  color: $cui-gray-70;
  background-color: $cui-white-100;
  border-radius: 2px;
  box-shadow: 0px 1px 2px 1px rgba(52, 53, 55, 0.18);

  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .upper-panel {
    display: flex;
    align-items: center;

    .left-panel {
      @extend %user-img;

      width: 35px;
      height: 35px;
      margin: 1rem;

      .icon {
        line-height: 35px;

        &.icon-user {
          bottom: -5px;
          font-size: 30px;
        }

        &.icon-location {
          font-size: 16px;
        }
      }
    }

    .middle-panel {
      width: 10rem;

      .title {
        font-size: 16px;
        color: $cui-black-100;
      }
    }

    .right-panel {
      .icon {
        bottom: -5px;
        font-size: 1.5rem;
        color: $cui-gray-90;

        &.icon-exit {
          margin-left: 0.65rem;
          font-size: 1rem;
        }
      }
    }
  }

  .lower-panel {
    display: flex;
    max-height: 261px;
    overflow-y: auto;
    flex-direction: column;

    .sub-panel {
      display: flex;
      margin: 0.5rem 2rem;
      flex: 0 0 auto;
      flex-direction: row;

      &:first-of-type {
        margin-top: 1.5rem;
      }

      .description {
        display: flex;
        flex-direction: column;
      }
    }

    .remove {
      margin: 0 2rem 1rem 2rem;
      font-family: $brand-font-light;
      font-size: 14px;
      color: $cui-red-50;
    }
  }
}
/* ---------- END CARD MEMBER ---------- */