$toast-speed: 1000ms !default;
$toast-curve: cubic-bezier(0.455, 0.03, 0.515, 0.955) !default;

.mc-toaster {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: 50%;
  z-index: $mc-zindex-toast;
  transform: translateX(-50%);
  pointer-events: none;
}

.mc-toast {
  position: relative;
  pointer-events: auto;
  overflow: hidden;

  &:not(&--appear) {
    height: 0 !important; /* stylelint-disable-line declaration-no-important */
  }

  &--appear {
    overflow: visible;
  }

  &--enter {
    top: 20px;
    pointer-events: none;
    transition:
      height $toast-curve $toast-speed,
      top $toast-curve $toast-speed;
  }

  &--enter-active {
    top: 0;
  }

  &--exit {
    top: 0;
    transition:
      height $toast-curve $toast-speed $toast-speed,
      top $toast-curve $toast-speed;
  }

  &--exit-active,
  &--exit-done {
    height: 0 !important; /* stylelint-disable-line declaration-no-important */
    top: -20px;
    pointer-events: none;
  }

  &__container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
  }

  &__content {
    background: $mc-color-gray-200;
    border-radius: $default-radius;
    margin-bottom: 10px;
    padding: 10px;
    overflow: hidden;

    .mc-toast--enter & {
      opacity: 0;
    }

    .mc-toast--enter-active & {
      opacity: 1;
      transition: all $toast-curve $toast-speed;
    }

    .mc-toast--exit & {
      opacity: 1;
    }

    .mc-toast--exit-active &,
    .mc-toast--exit-done & {
      opacity: 0;
      transition: all $toast-curve $toast-speed;
    }

    .mc-toast--success & {
      background: $mc-color-success;
    }

    .mc-toast--error & {
      background: $mc-color-error;
    }
  }
}