@import './var.less';

:root {
  --glm-toast-max-width: @toast-max-width;
  --glm-toast-font-size: @toast-font-size;
  --glm-toast-text-color: @toast-text-color;
  --glm-toast-loading-icon-color: @toast-loading-icon-color;
  --glm-toast-line-height: @toast-line-height;
  --glm-toast-border-radius: @toast-border-radius;
  --glm-toast-background-color: @toast-background-color;
  --glm-toast-icon-size: @toast-icon-size;
  --glm-toast-text-min-width: @toast-text-min-width;
  --glm-toast-text-padding: @toast-text-padding;
  --glm-toast-default-padding: @toast-default-padding;
  --glm-toast-default-width: @toast-default-width;
  --glm-toast-default-min-height: @toast-default-min-height;
  --glm-toast-position-top-distance: @toast-position-top-distance;
  --glm-toast-position-bottom-distance: @toast-position-bottom-distance;
}

.glm-toast {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  transition: all var(--glm-animation-duration-fast);

  // hack for avoid max-width when use left & fixed
  width: var(--glm-toast-default-width);
  max-width: var(--glm-toast-max-width);
  min-height: var(--glm-toast-default-min-height);
  padding: var(--glm-toast-default-padding);
  color: var(--glm-toast-text-color);
  font-size: var(--glm-toast-font-size);
  line-height: var(--glm-toast-line-height);

  // allow newline character
  white-space: pre-wrap;
  text-align: center;
  // https://github.com/youzan/vant/issues/8959
  word-break: break-all;
  background: var(--glm-toast-background-color);
  border-radius: var(--glm-toast-border-radius);

  &--unclickable {
    // lock scroll
    overflow: hidden;
    cursor: not-allowed;

    // should not add pointer-events: none directly to body tag
    // that will cause unexpected tap-highlight-color in mobile safari
    * {
      pointer-events: none;
    }
  }

  &--text,
  &--html {
    width: fit-content;
    min-width: var(--glm-toast-text-min-width);
    min-height: 0;
    padding: var(--glm-toast-text-padding);

    .glm-toast__text {
      margin-top: 0;
    }
  }

  &--top {
    top: var(--glm-toast-position-top-distance);
  }

  &--bottom {
    top: auto;
    bottom: var(--glm-toast-position-bottom-distance);
  }

  &__icon {
    font-size: var(--glm-toast-icon-size);
  }

  &__loading {
    padding: var(--glm-padding-base);
    color: var(--glm-toast-loading-icon-color);
  }

  &__text {
    margin-top: var(--glm-padding-xs);
  }
}