@import "../../../style/mixin";

@include export-module('co-transaction-sales-person-input-layout') {
  .co-transaction-sales-person-input {
    .container {
      padding: $tp-transaction-sales-person-input-padding;
      border-radius: $tp-transaction-sales-person-input-border-radius;
      border-width: $tp-transaction-sales-person-input-border-width;
      position: fixed;
      z-index: $tp-transaction-sales-person-input-z-index;
      font-family: $tp-transaction-sales-person-input-font-family;
      font-size: $tp-transaction-sales-person-input-font-size;
    }

    .salesperson-list {
      max-height: $tp-transaction-sales-person-list-max-height;
      width: $tp-transaction-sales-person-list-width;
      overflow-x: scroll;
      gap: $tp-transaction-sales-person-list-gap;
      display: flex;
      flex-direction: column;
      scrollbar-width: none;
      margin-bottom: $tp-transaction-sales-person-list-margin-bottom;
    }

    .salesperson-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      padding: $tp-transaction-sales-person-item-padding;
      border-radius: $tp-transaction-sales-person-item-border-radius;
      transition: $tp-transaction-sales-person-item-transition;
    }

    .salesperson-info {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: $tp-transaction-sales-person-info-gap;
    }

    .salesperson-avatar {
      width: $tp-transaction-sales-person-avatar-size;
      height: $tp-transaction-sales-person-avatar-size;
    }

    .salesperson-name {
      max-width: $tp-transaction-sales-person-name-max-width;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}