@include b(picker) {
  @include define(header-height, 45px);
  @include define(header-font-size, 16px);
  @include define(header-background, #f7f7f7);
  @include define(header-title-text-color, var(--za-color-text));
  @include define(header-confirm-text-color, var(--za-theme-primary));
  @include define(header-cancel-text-color, var(--za-color-text-caption));

  @include define(background, #fff);

  @include define(content-background, #fff);
  @include define(content-padding, 16px);
  @include define(content-mask-start-background, rgba(255, 255, 255, 0.4));
  @include define(content-mask-end-background, rgba(255, 255, 255, 0.8));
  @include define(wheel-item-rows, 5);
  @include define(wheel-item-height, 34px);
  @include define(wheel-item-font-size, 20px);
  @include define(wheel-item-text-color, var(--za-color-text));
  @include define(wheel-item-disabled-text-color, var(--za-color-text-disabled));
  @include define(wheel-item-selected-background, rgba(116, 116, 128, 0.08));
  @include define(wheel-item-selected-border-radius, 7px);

  @include define(-wheel-item-rows, var(--wheel-item-rows));
  @include define(-wheel-item-height, var(--wheel-item-height));
  @include define(-wheel-item-font-size, var(--wheel-item-font-size));
  @include define(-wheel-item-text-color, var(--wheel-item-text-color));
  @include define(-wheel-item-disabled-text-color, var(--wheel-item-disabled-text-color));
  @include define(
    -wheel-item-selected-background,
    var(--wheel-item-selected-background)
  );
  @include define(-wheel-item-selected-border-radius, var(--wheel-item-selected-border-radius));

  background: var(--background);

  @include b(picker-view) {
    @include define(background, var(--content-background));
    @include define(padding, var(--content-padding));
    @include define(mask-start-background, var(--content-mask-start-background));
    @include define(mask-end-background, var(--content-mask-end-background));
    @include define(wheel-item-rows, var(---wheel-item-rows));
    @include define(wheel-item-height, var(---wheel-item-height));
    @include define(wheel-item-font-size, var(---wheel-item-font-size));
    @include define(wheel-item-text-color, var(---wheel-item-text-color));
    @include define(wheel-item-disabled-text-color, var(---wheel-item-disabled-text-color));
    @include define(
      wheel-item-selected-background,
      var(---wheel-item-selected-background)
    );
    @include define(wheel-item-selected-border-radius, var(---wheel-item-selected-border-radius));
  }

  @include e(header) {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: var(--header-height);
    line-height: var(--header-height);
    font-size: var(--header-font-size);
    background: var(--header-background);
    @include onepx(top);
  }

  @include e(body) {
    width: 100%;
    height: 100%;
    flex: 1;
  }

  @include e(cancel, confirm) {
    flex: 1;
    padding: 0 r(20);
    cursor: pointer;
  }

  @include e(cancel) {
    text-align: left;
    color: var(--header-cancel-text-color);
  }

  @include e(confirm) {
    text-align: right;
    color: var(--header-confirm-text-color);
  }

  @include e(title) {
    color: var(--header-title-text-color);
  }
}