@import '../variables/default.scss';
@import '../mixins/index.scss';

$ink-toast-min-width: 256px !default;
$ink-toast-image-size: 120px !default;
$ink-toast-font-size: $ink-font-size-md;
$ink-toast-icon-size: 80px !default;
$ink-toast-color: $ink-color-white;
$ink-toast-bg-color: rgba(
  $color: $ink-color-black-0,
  $alpha: 0.8,
);
$ink-toast-line-height: $ink-line-height-md !default;
$ink-toast-zindex: $ink-zindex-1080 !default;

@keyframes atRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ink-toast {
  @include display-flex;
  @include align-items(center);
  @include justify-content(center);
  flex-direction: column;
  padding: $ink-spacing-md;
  min-width: $ink-toast-min-width;
  width: auto;
  max-width: 80%;
  border-radius: $ink-border-radius-md;
  background-color: $ink-toast-bg-color;
  z-index: $ink-toast-zindex;

  &--icon {
    width: 46%;
  }

  &--only-text {
    padding: $ink-spacing-sm $ink-spacing-md;
  }

  &--empty {
    display: none;
  }

  &__mask {
    background-color: transparent;

    &--none {
      display: none;
    }
  }

  &__info {
    @include line(2);
    margin-top: $ink-spacing-sm;
    color: $ink-toast-color;
    font-size: $ink-toast-font-size;
    line-height: $ink-toast-line-height;
    text-align: center;
    word-break: break-all;

    &--no-icon {
      margin-top: 0;
    }
  }
}