@import "../settings/variables";
@import "./typography";
@import "../tools/ellipsis";

.contact-item {
  $root: &;
  $selected: #{&}--selected;
  $disabled: #{&}--disabled;

  &__avatar {
    #{$root} & {
      font-weight: $contact-item-font-weight-avatar;
      cursor: inherit;
    }
  }

  &__text-container {
    overflow: hidden;
    margin-left: spacing(sm);
  }

  &__text {
    @include ellipsis();

    &--title {
      @include typography-sm($contact-item-color-title, 700);
    }

    &--description {
      @include typography-sm($contact-item-color-description, 400);
    }

    #{$selected} & {
      color: $contact-item-color-selected;
    }

    #{$disabled} & {
      color: $contact-item-color-disabled;
    }
  }

  &--clickable {
    cursor: pointer;

    &:hover:not(#{$disabled}) {
      background-color: $contact-item-color-hover;
    }

    &#{$disabled} {
      cursor: not-allowed;
    }
  }
}