@import '~@cainiaofe/cn-ui-m-theme/token.px.scss';

$class-prefix: 'cn-ui-m';

.#{$hashClassName}.#{$class-prefix}-employee-select-readonly {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;

  .#{$class-prefix}-employee-item {
    margin-right: $m-s-8;
    &:last-child {
      margin-right: 0;
    }
  }
}

.#{$hashClassName}.#{$class-prefix}-employee-item,
.#{$hashClassName}.cn-ui-m-select-option .#{$class-prefix}-employee-item {
  --cn-list-item-min-height: #{$m-s-36};
  --cn-list-item-padding-lr: 0;
  --cn-list-item-padding-tb: 0;

  .#{$class-prefix}-employee-item-avatar {
    width: #{$m-s-36};
    height: #{$m-s-36};
    border-radius: 50%;
    object-fit: cover;
  }

  &.#{$class-prefix}-employee-item-mini {
    flex-direction: row;
    display: flex;
    align-items: center;
    font-size: $m-font-size-body-1;
    cursor: pointer;

    .#{$class-prefix}-employee-item-avatar {
      width: #{$m-s-20};
      height: #{$m-s-20};
      margin-right: $m-s-4;
    }
    .#{$class-prefix}-employee-item-depart {
      height: $m-s-20;
      padding: 0 $m-s-8;
      border-radius: 10px;
      background-color: $m-color-text-tip;
      color: $m-color-bg-white;
      margin-left: 5px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
  }

  .cn-ui-m-list-item-content > .cn-ui-m-list-item-caption {
    display: block;
    margin: 0;
    max-width: 260px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .cn-ui-m-list-item-inner {
    border-bottom: none;
  }
}

.#{$hashClassName}.#{$class-prefix}-employee-item-popover {
  --cn-list-item-padding-tb: 0;
  --cn-list-item-padding-lr: 0;
  --cn-list-border-width: 0;
  max-width: 90vw;

  .#{$class-prefix}-employee-item-popover-body {
    padding: 0 0 $m-s-12;
  }
  .#{$class-prefix}-employee-item-popover-footer {
    border-top: $m-s-1 solid $m-color-bg-disabled;
    padding: $m-s-12 0 $m-s-4;
    text-align: right;
  }

  .#{$class-prefix}-employee-item-popover-department {
    margin-top: $m-s-4;
  }

  .#{$class-prefix}-employee-item-avatar {
    width: #{$m-s-40};
    height: #{$m-s-40};
  }
}