@include export-module('cc-relation-suggestions-list-item-layout') {
  .co-relation-suggestions-list-item {
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    padding: $tp-relation-suggestions-list-item-padding;
    background-color: $tp-relation-suggestions-list-item-background-color;
    border-color: $tp-relation-suggestions-list-item-border-color;
    border-style: $tp-relation-suggestions-list-item-border-style;
    border-width: $tp-relation-suggestions-list-item-border-width;
    border-radius: $tp-relation-suggestions-list-item-border-radius;
    margin: $tp-relation-suggestions-list-item-margin;
    max-width: $tp-relation-suggestions-list-item-max-width;

    .relationNumber {
      font-size: $tp-relation-suggestions-list-item-relation-number-fontsize;
      color: $tp-relation-suggestions-list-item-fontcolor;
      font-weight: $tp-relation-suggestions-list-item-name-fontweight;
      margin-bottom: $tp-relation-suggestions-list-item-relation-number-margin-bottom;
    }

    .name {
      font-weight: $tp-relation-suggestions-list-item-name-fontweight;
      font-size: $tp-relation-suggestions-list-item-name-fontsize;
      color: $tp-relation-suggestions-list-item-fontcolor;
    }

    .email, .address, .phone {
      color: $tp-relation-suggestions-list-item-fontcolor;
      font-size: $tp-relation-suggestions-list-item-fontsize;
    }

    &:hover {
      background-color: $tp-relation-suggestions-list-item-hover-color;
      co-button.popup {
        visibility: visible;
      }
      .relationNumber, .email, .address, .phone {
        color: #747b87;
      }
      .name {
        color: #171721;
      }
    }
  }
}