@import "../../styles/global-css-settings.scss";
@import "../../styles/typography.scss";
@import "../../styles/themes.scss";

.monday-style-toast {
  @include font-paragraph();
  @include box-shadow-medium();
  @include theme-prop(color, text-color-on-primary);
  margin: $spacing-medium;
  position: fixed;
  top: 0;
  left: 50%;
  right: auto;
  transform: translate(-50%,0);
  padding: $spacing-small;
  align-items: center;
  display: flex;
  min-width: 390px;
  border-radius: $border-radius-small;

  &-icon {
    display: flex;
    padding-left: $spacing-small;
    padding-right: $spacing-small;
  }

  &-content {
    line-height: 22px;
    font-size: 14px;
    flex-grow: 1;
    &-no-icon {
      padding-left: $spacing-small;
    }
  }

  &-action {
    padding-right: $spacing-small;
  }

  &--type {
    &-normal {
      @include theme-prop(background-color, primary-color);
    }
    &-positive {
      @include theme-prop(background-color, positive-color);
    }
    &-negative {
      @include theme-prop(background-color, negative-color);
    }
  }

  &-animation {
    &-enter-active, &-exit-active {
      animation-iteration-count: 1;
      animation-direction: forwards;
      animation-fill-mode: forwards;
    }
    &-enter-active {
      animation-duration: 400ms;
      animation-name: toast-pop-in;
    }

    &-exit-active {
      animation-duration: 160ms;
      animation-name: toast-pop-out;
    }
  }
}

@keyframes toast-pop-in {
  0% {
    transform: translate(-50%,-115px);
  }
  25% {
    // down 130 px
    transform: translate(-50%,15px);
    animation-timing-function: cubic-bezier(0,0,0.35,1);
  }
  
  66% {
    // up 20 px
    transform: translate(-50%,-5px);
    animation-timing-function: cubic-bezier(0.4,0,1,1);
  }
  
  100% {
    // down 5 px
    transform: translate(-50%,0px);
    animation-timing-function: cubic-bezier(0.4,0,1,1);
  }
}


@keyframes toast-pop-out {
  0% {
    transform: translate(-50%,0);
  }
  100% {
    // up 130 px
    transform: translate(-50%,-130px);
    animation-timing-function: cubic-bezier(0,0,0.35,1);
  }
}