@include b(view-dempickupview-content) {
  display: flex;
  height: 100%;
}

@include b(view-dempickupview-left) {
  flex-grow: 1;
}

@include b(view-dempickupview-center) {
  @include set-component-css-var('mpickup-view-center', $mpickup-view-center);
  @include flex(column, center);

  flex: 0 0 getCssVar('mpickup-view-center', 'width');
  background-color: getCssVar('mpickup-view-center', 'bg-color');
}

@include b(view-dempickupview-right) {
  @include set-component-css-var('mpickup-view-right', $mpickup-view-right);

  flex: 0 0 getCssVar('mpickup-view-right', 'width');
  padding: getCssVar('mpickup-view-right', 'padding');
  overflow: auto;
  background-color: getCssVar('mpickup-view-right', 'bg-color');
  @include e(list-item) {
    @include flex(row, space-between);

    padding: getCssVar('mpickup-view-right', 'item-padding');
    border-bottom: getCssVar('mpickup-view-right', 'item-border-bottom');

    > i {
      cursor: pointer;
    }

    @include when(selected) {
      color: getCssVar('mpickup-view-right', 'item-selected-color');
      background-color: getCssVar(
        'mpickup-view-right',
        'item-selected-bg-color'
      );
    }
  }
}

@include b(view-dempickupview-footer) {
  @include set-component-css-var('mpickup-view-footer', $mpickup-view-footer);
  @include flex(row, flex-end);

  padding: getCssVar('mpickup-view-footer', 'padding');
  border-top: getCssVar('mpickup-view-footer', 'border-top');

  .ivu-btn:nth-child(1) {
    color: getCssVar('mpickup-view-footer', 'confirm-btn-color');
    background-color: getCssVar('mpickup-view-footer', 'confirm-btn-bg-color');
  }

  .ivu-btn:nth-child(2) {
    margin: getCssVar('mpickup-view-footer', 'btn-margin');
  }
}
