.#{$tree_transfer} {
  .transfer-panel {
    .panel-list {
      display: flex;
      flex-direction: column;
      padding: var(--md);
      padding-top: 0;
      flex: 1;
      flex-basis: auto;
      overflow: auto;
      flex-wrap: nowrap;
      gap: var(--transfer-list-gap);
      &.has-filterable {
        padding-top: 0;
      }

      .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--transfer-item-padding-y) var(--transfer-item-padding-x);
        border-radius: var(--transfer-radius);
        gap: var(--transfer-item-gap);
        @include transition(all var(--duration) var(--timing));
        &:hover {
          background-color: var(--transfer-item-bg-color-hover);
          .item-close {
            visibility: visible;
            opacity: 1;
          }
        }

        &.is-checked {
          background-color: var(--transfer-item-bg-color-checked);
        }

        &.is-disabled {
          color: var(--text-light);
          background-color: unset;
          &:hover {
            background-color: unset;
          }
        }

        .checkbox-label {
          padding: 0;
          flex-grow: 1;
          .close {
            display: none;
          }
        }

        .checkbox-inner {
          flex-grow: 0;
        }
        .item-close {
          margin: 0;
          opacity: 0;
          visibility: hidden;
          @include transition(all var(--duration) var(--timing));
        }
      }
    }
  }
}