<aio-mask
  wx:if="{{ mask || forbidClick }}"
  show="{{ show }}"
  z-index="{{ zIndex }}"
  root-portal="{{rootPortal}}"
  custom-style="{{ mask ? 'background-color: transparent;' : 'background-color: transparent;' }}"
/>
<aio-transition
  show="{{ show }}"
  custom-style="z-index: {{ zIndex }}"
  aio-class="aio-toast__container"
>
  <view
    class="aio-toast aio-toast--{{ (type === 'text' || type === 'html') ? 'text' : 'icon' }} aio-toast--{{ position }}"
    catch:touchmove="noop"
  >
    <!-- text only -->
    <text wx:if="{{ type === 'text' }}">{{ message }}</text>

    <!-- html only -->
    <rich-text wx:elif="{{ type === 'html' }}" nodes="{{ message }}"></rich-text>

    <!-- with icon -->
    <block wx:else>
      <aio-loading
        wx:if="{{ type === 'loading' }}"
        color="white"
        type="{{ loadingType }}"
        aio-class="aio-toast__loading"
      />
      <icon wx:else type="{{type}}" class="aio-toast__icon" color="#C9C9C9" />
      <text wx:if="{{ message }}" class="aio-toast__text">{{ message }}</text>
    </block>

    <slot />
  </view>
</aio-transition>
