@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-toast-max-width: 70%;
  --xzx-toast-font-size: var(--xzx-text-sm);
  --xzx-toast-text-color: var(--xzx-text-white-1);
  --xzx-toast-loading-icon-color: var(--xzx-text-white-1);
  --xzx-toast-line-height: var(--xzx-text-lh-sm);
  --xzx-toast-radius: var(--xzx-br-base);
  --xzx-toast-background: rgba(0, 0, 0, 0.90);
  --xzx-toast-icon-size: 32px;
  --xzx-toast-text-min-width: 96px;
  --xzx-toast-text-padding: var(--xzx-padding-xs) var(--xzx-padding-sm);
  --xzx-toast-default-padding: var(--xzx-padding-md) var(--xzx-padding-lg);
  --xzx-toast-default-width: 88px;
  --xzx-toast-default-min-height: 88px;
  --xzx-toast-position-top-distance: 20%;
  --xzx-toast-position-bottom-distance: 20%;
}

@include b(toast) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  transition: all var(--xzx-duration-fast);

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

  // allow newline character
  white-space: pre-wrap;
  word-break: break-all;
  text-align: center;
  background: var(--xzx-toast-background);
  border-radius: var(--xzx-toast-radius);

  &--break {
    &-normal {
      word-break: normal;
      word-wrap: normal;
    }

    &-word {
      word-break: normal;
      word-wrap: break-word;
    }
  }

  &--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(--xzx-toast-text-min-width);
    min-height: 0;
    padding: var(--xzx-toast-text-padding);

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

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

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

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

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

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