@import '../../styles/variables.less';
@import '../../styles/themes/@{so-theme}.less';

@transfer-prefix: ~'@{so-prefix}-transfer';
@checkinput-prefix: ~'@{so-prefix}-checkinput';

.@{transfer-prefix} {
  display: flex;
  align-items: stretch;

  &-card {
    display: inline-block;
    min-width: 200px;
    // width: auto;

    &-header {
      padding: 8px 12px;
      display: flex;
      justify-content: space-between;
      align-items: stretch;

      &-title {
        padding: 2px 0 0 0;
      }
    }

    &-body {
      padding: 2px 0;
      overflow: hidden;
      height: 180px;
      z-index: 1;

      .@{transfer-prefix}-body-container {
        box-sizing: border-box;
        height: 100%;
      }
    }

    &-footer {
      padding: 0;
    }
  }

  &-item {
    width: 100%;
    cursor: pointer;

    &-check {
      width: 100%;
      margin-right: 0;
      padding: 6px 0 6px 12px;
      i.@{checkinput-prefix}-indicator + span {
        vertical-align: top;
      }
    }

    &:hover {
      background-color: var(--select-option-hover-bg, #f5f5f5);
    }

    &-disabled {
      color: var(--gray-500, #adb5bd);

      &:hover {
        background-color: transparent;
        color: var(--gray-500, #adb5bd);
      }
    }
  }

  &-btns {
    padding: 0 8px;
    display: flex;
    align-items: center;

    &-bottom {
      margin-bottom: 4px;
    }

    &-button {
      color: #fff;
      display: inline-flex;

      > svg {
        height: 18px;
        width: 10px;
        fill: #fff;
      }

      &[disabled] > svg {
        fill: rgba(0,0,0,0.25);
      }
    }
  }

  &-filter {
    padding: 10px 12px 8px;
  }

  &-empty {
    position: absolute;
    text-align: center;
    width: 100%;
    top: 50%;
    color: @gray-500;
    transform: translateY(-50%)
  }


  &.@{transfer-prefix}-rtl {
    direction: rtl;
    text-align: right;

    .@{transfer-prefix}-btns-button > svg {
      transform: rotate(180deg);
    }

    .@{transfer-prefix}-item-check {
      margin-left: 0;
      padding: 6px 12px 6px 0;
    }
  }
}