<wxs src="../common/utils.wxs" module="_" />
<view
  wx:if="{{realVisible}}"
  class="{{_.cls(classPrefix, [direction, theme, ['with-text', message]])}} {{prefix}}-class {{transitionClass}}"
  style="top: {{placement === 'top' ? '25%' : placement === 'bottom' ? '75%': '45%'}} {{ customStyle }}"
  bind:transitionend="onTransitionEnd"
>
  <view class="{{classPrefix}}__content {{classPrefix}}__content--{{direction}}">
    <t-icon
      aria-hidden="{{true}}"
      wx:if="{{typeMapIcon!=='loading' || icon}}"
      name="{{typeMapIcon || icon}}"
      class="{{classPrefix}}__icon {{classPrefix}}__icon--{{direction}}"
    />
    <t-loading
      wx:if="{{typeMapIcon === 'loading'}}"
      theme="circular"
      size="{{direction === 'row' ? '48rpx' : '64rpx'}}"
      loading
      inherit-color
      layout="vertical"
    />
    <slot name="icon" />
    <view
      aria-role="alert"
      class="{{classPrefix}}__text {{typeMapIcon || icon ? classPrefix + '__text--' + direction : ''}}"
      >{{message}}</view
    >
    <slot name="message" />
  </view>
</view>
<t-overlay
  customStyle="{{ overlayProps.customStyle }}"
  visible="{{realVisible && (showOverlay || preventScrollThrough)}}"
  z-index="{{overlayProps.zIndex}}"
  backgroundColor="{{preventScrollThrough ? 'transparent' : overlayProps.backgroundColor}}"
  preventScrollThrough="{{preventScrollThrough || overlayProps.preventScrollThrough}}"
/>
