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

.van-toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  color: var(--toast-text-color, @toast-text-color);
  font-size: var(--toast-font-size, @toast-font-size);
  line-height: var(--toast-line-height, @toast-line-height);

  // allow newline charactor
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: var(--toast-background-color, @toast-background-color);
  border-radius: var(--toast-border-radius, @toast-border-radius);

  &__container {
    position: fixed;
    top: 50%;
    left: 50%;
    // hack for avoid max-width when use left & fixed
    width: fit-content;
    transform: translate(-50%, -50%);
    max-width: var(--toast-max-width, @toast-max-width);
  }

  &--text {
    min-width: var(--toast-text-min-width, @toast-text-min-width);
    padding: var(--toast-text-padding, @toast-text-padding);
  }

  &--icon {
    width: var(--toast-default-width, @toast-default-width);
    min-height: var(--toast-default-min-height, @toast-default-min-height);
    padding: var(--toast-default-padding, @toast-default-padding);

    .van-toast__icon {
      font-size: var(--toast-icon-size, @toast-icon-size);
    }

    .van-toast__text {
      padding-top: @padding-xs;
    }
  }

  &__loading {
    margin: 10px 0;
  }

  &--top {
    transform: translate(0, -30vh);
  }

  &--bottom {
    transform: translate(0, 30vh);
  }
}