@import "../../styles/global.scss";
@import "../../styles/variables.scss";

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

.ai-toast-wrapper {
  position: fixed;
  bottom: 0;
  font-family: "Open Sans";

  .ai-toast {
    background: $color-core-ink-light;
    color: $color-core-grey-lightest;
    font-size: $size-core-body;
    min-height: $size-core-xlarge;
    margin: $size-spacing-xxs $size-spacing-s;
    border-radius: 4px;
    position: relative;
    display: flex;
    width: max-content;
    max-width: 400px;
    animation: slide-in 0.4s forwards;

    .ai-toast__body {
      display: flex;
      align-self: center;
      padding: $size-spacing-s;

      .ai-toast__icon {
        width: 16px;
        height: 16px;
        margin-right: $size-spacing-s;
        font-size: $size-core-body;
        padding-top: $size-spacing-xxxs;
        padding-left: $size-spacing-xxxs;
      }

      .ai-toast__message {
        max-width: 300px;
        hyphens: auto;

        .ai-toast__title {
          font-weight: 600;
          line-height: 22px;
        }
        .ai-toast__text {
          margin-top: $size-spacing-xxxs;
        }
      }

      .ai-toast__action {
        cursor: pointer;
        height: 24px;
        margin-top: $size-spacing-xxs;
        padding: $size-spacing-xxxs $size-spacing-xxs;
        border-radius: 6px;
        color: $color-core-white;
        background: rgba(255, 255, 255, 0.08);
      }

      .ai-toast__close {
        width: 8px;
        height: 8px;
        font-size: 8px;
        padding-top: $size-spacing-xxs;
        padding-right: $size-spacing-xxs;
        margin-left: 20px;
        background: transparent;
        border: 0;
        color: $color-core-grey-lightest;
        cursor: pointer;
      }
    }

    .ai-toast__bar {
      position: absolute;
      height: 2px;
      bottom: 0;
      background: $color-core-grey-lightest;
      width: 50%;
    }
  }

  .ai-toast--warning {
    background: $color-core-orange-base
  }

  .ai-toast--positive {
    background: $color-core-green-dark;
  }

  .ai-toast--negative {
    background: $color-core-red-base;
    animation: shake 0.4s;
    animation-delay: 0.4s;
  }

  .ai-toast.exit {
    animation: slide-out 0.5s;
  }
}

@keyframes slide-in {
  0% {transform: translateX(-100%)}
  100% { transform: translateX(0%)}
}

@keyframes slide-out {
  0% {transform: translateX(0%)}
  100% { transform: translateX(-200%)}
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}