@include b(action-sheet) {
  @include define(background, #fff);
  @include define(border-radius, 14px);
  @include define(spacing-margin, 8px);
  @include define(item-height, 56px);
  @include define(item-font-size, 20px);
  @include define(item-font-weight, 500);
  @include define(item-active-background, var(--za-background-active));
  @include define(item-opacity-disabled, var(--za-opacity-disabled));
  @include define(item-text-color, var(--za-theme-primary));
  @include define(cancel-text-color, var(--za-theme-primary));
  @include define(cancel-margin-top, 8px);

  @include m(spacing) {
    margin: var(--spacing-margin);

    @include e(actions, cancel) {
      border-radius: var(--border-radius);
    }
  }

  @include e(actions, cancel) {
    overflow: hidden;
    background: var(--background);
  }

  @include e(cancel) {
    margin-top: var(--cancel-margin-top);

    @include e(item) {
      color: var(--cancel-text-color);
    }
  }

  @include e(item) {
    position: relative;
    display: block;
    height: var(--item-height);
    line-height: var(--item-height);
    font-size: var(--item-font-size);
    color: var(--item-text-color);
    text-align: center;

    &:not(&--disabled):active {
      background: var(--item-active-background);
    }

    &:not(:first-of-type) {
      @include onepx(top);
    }

    @include m(bold) {
      font-weight: var(--item-font-weight);
    }

    @include m(disabled) {
      @include define(item-text-color, var(--za-color-text-disabled));

      cursor: not-allowed;
      pointer-events: none;
    }

    @include m(default) {
      @include define(item-text-color, var(--za-color-text));
    }

    @include m(danger) {
      @include define(item-text-color, var(--za-theme-danger));
    }
  }
}
