@import '../../common/style/common.less';
@import '../../common/style/animation.less';

.hanzo-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    display: flex;
    text-align: center;
    color: @toast-text-color;
    max-width: @toast-max-width;
    font-size: @toast-font-size;
    line-height: @toast-line-height;
    border-radius: @toast-border-radius;
    word-break: break-all;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    box-sizing: content-box;
    transform: translate3d(-50%, -50%, 0);
    background-color: @toast-background-color;
  
    // hack for avoid max-width when use left & fixed
    width: fit-content;
  
    // allow newline charactor
    white-space: pre-wrap;
  
    // should not add pointer-events: none directly to body tag
    // that will cause unexpected tap-highlight-color in mobile safari
    &--unclickable {
      * {
        pointer-events: none;
      }
    }
  
    &--text {
      padding: @toast-text-padding;
      min-width: @toast-text-min-width;
    }
  
    &--default {
      width: @toast-default-width;
      padding: @toast-default-padding;
      min-height: @toast-default-min-height;
  
      .hanzo-toast__icon {
        font-size: @toast-icon-size;
        margin: 15px 0;
      }
  
      .hanzo-loading {
        margin: 10px 0;
      }
  
      .hanzo-toast__text {
        padding-top: 5px;
      }
    }
  
    &--top {
      top: @toast-position-top-distance;
    }
  
    &--bottom {
      top: auto;
      bottom: @toast-position-bottom-distance;
    }
  }