bb-attendee-item {

  .attendee {
    @include column-flex-container;

    font: {
      size: 15px;
    }

    &__details {
      @include flex-row;
      align-items: center;
      background-color: $bb-studio-solitude-gray;
      padding: spacing(10);
    }

    &__info {
      @include column-flex-container;
      flex-grow: 1;
      width: calc(100% - 85px);
    }

    &__name {
      color: $bb-dark-gray;
      margin: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    &__contact-info {
      color: $studio-raven-pale-gray;
      p {
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    &__edit {
      color: $studio-cyan-blue;
      padding-right: spacing(20);
    }

    &__edit-btn {
      font-size: 15px;
    }

    &__remove-btn {
      @include css-close-icon;
      background-color: transparent;

      &::before, &::after {
        background: $studio-cyan-blue;
      }
    }

    &__comm {
      margin-bottom: spacing(10);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }
}