@include b(modal) {
  @include define(background, rgb(242, 242, 242));
  @include define(border-radius, 14px);
  @include define(shadow, 0 7px 21px var(--za-color-shadow));
  @include define(title-font-size, 17px);
  @include define(title-font-weight, 500);
  @include define(title-text-color, var(--za-color-text));
  @include define(close-size, 20px);
  @include define(close-color, #ccc);
  @include define(close-active-color, #999);
  @include define(body-font-size, 13px);
  @include define(body-text-color, var(--za-color-text));
  @include define(body-padding, 16px);
  @include define(button-height, 44px);
  @include define(button-font-size, 17px);
  @include define(button-font-weight, 500);
  @include define(button-text-color, var(--za-theme-primary));
  @include define(button-background, transparent);
  @include define(button-active-background, var(--za-background-active));
  @include define(button-disabled-opacity, var(--za-opacity-disabled));

  -webkit-overflow-scrolling: touch;

  @include b(popup) {
    position: relative;
    background: var(--background);
    box-shadow: var(--shadow);
    overflow: hidden;
  }

  @include m(radius) {
    @include b(popup) {
      border-radius: var(--border-radius);
    }
  }

  @include e(body) {
    position: relative;
    font-size: var(--body-font-size);
    color: var(--body-text-color);
    padding: var(--body-padding);
    user-select: auto;

    @include e(title) {
      text-align: center;
      font-size: var(--title-font-size);
      font-weight: var(--title-font-weight);
      color: var(--title-text-color);
      margin-bottom: 6px;
    }

    @include e(close) {
      position: absolute;
      top: 0;
      right: 0;
      color: var(--close-color);
      font-size: var(--close-size);
      margin: var(--body-padding);
      cursor: pointer;

      &:hover {
        color: var(--close-active-color);
      }
    }
  }

  @include e(action) {
    position: relative;
    display: flex;
    align-items: stretch;
    @include onepx(top);
  }

  @include e(button) {
    position: relative;
    display: block;
    width: 100%;
    height: var(--button-height);
    line-height: var(--button-height);
    background: var(--button-background);
    font-size: var(--button-font-size);
    color: var(--button-text-color);
    text-align: center;

    &:active {
      background: var(--button-active-background);
    }

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

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

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

      cursor: not-allowed;
      opacity: var(--button-disabled-opacity);
      pointer-events: none;
    }

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

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

@include b(alert, confirm) {
  @include b(modal) {
    @include e(body) {
      text-align: center;
    }
  }
}