@use 'sass:math';
@use 'sass:map';

@use 'mixins/mixins' as *;
@use 'mixins/utils' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

@include b(transfer) {
  display: flex;
  align-items: center;

  @include e(buttons) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 16px;

    .#{$namespace}-button {
      margin: 4px 0;
    }
  }
}

@include b(transfer-panel) {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: getCssVar('color-white');
  border: 1px solid getCssVar('color-neutral-3');
  border-radius: getCssVar('border-radius-md');
  overflow: hidden;

  @include e(body) {
    flex-grow: 1;
    overflow: hidden;
  }

  @include e(body-inner) {
    overflow-y: auto;
    height: 100%;
  }

  @include e(list) {
    padding: 8px 16px;
  }

  @include e(item) {
    &.#{$namespace}-checkbox {
      margin-top: 8px;
      margin-bottom: 8px;

      color: getCssVar('color-neutral-9');
    }

    &:hover {
      color: getCssVar('color-primary-3');
    }
  }

  @include e(filter) {
    text-align: center;
    margin: 16px 16px 0;
    box-sizing: border-box;
    width: auto;

    .#{$namespace}-input__inner {
      height: 32px;
      width: 100%;
      font-size: 12px;
      font-weight: 600;
      line-height: 16px;
      display: inline-block;
      box-sizing: border-box;
    }

    .#{$namespace}-icon-circle-close {
      cursor: pointer;
    }
  }

  .#{$namespace}-transfer-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;

    background: getCssVar('color-neutral-1');
    color: getCssVar('color-neutral-9');
    border-bottom: 1px solid getCssVar('color-neutral-3');
  }

  .#{$namespace}-transfer-panel__footer {
    padding: 16px;
    background: getCssVar('color-neutral-1');
    border-top: 1px solid getCssVar('color-neutral-3');
  }

  .#{$namespace}-transfer-panel__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: getCssVar('color-neutral-7');
  }
}