$toast-padding: 20px !default;
$toast-border-radius: 13px !default;

$toast-bg-dark: rgba($dark-black, 0.8) !default;
$toast-bg-light: rgba($white, 0.9) !default;

$toast-shadow: 0px 0px 6px 2px rgba($dark-black, 0.1) !default;

$toast-text-margin-ver: 8px !default;
$toast-text-font-size: 14px !default;
$toast-text-color-dark: $white !default;
$toast-text-color-light: $dark-black !default;

$toast-position-top-distance: 20%;
$toast-position-bottom-distance: 20%;

.mx {
  &-toast {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;

    box-shadow: $toast-shadow;

    border-radius: $toast-border-radius;
    opacity: 1;

    position: fixed;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    z-index: $zindex-fixed;

    &--center {
      top: 50%;
    }

    &--top {
      top: $toast-position-top-distance;
    }

    &--bottom {
      bottom: $toast-position-bottom-distance;
    }

    &--dark {
      background-color: $toast-bg-dark;
      color: $toast-text-color-light;
    }

    &--light {
      background-color: $toast-bg-light;
      color: $black;
    }

    &--icon {
      min-width: 80px;
      min-height: 80px;
    }

    &--it {
      min-width: 100px;
      min-height: 88px;
      padding: $toast-padding;
    }

    &-text {
      font-size: $font-size-12;
      padding: 5px 8px;
      @include text-ellipsis();

      &--dark {
        color: $toast-text-color-dark;
      }

      &--light {
        color: $toast-text-color-light;
      }

      &--icon {
        margin-top: $toast-text-margin-ver;
        padding: 0;
      }
    }

    &-fade-enter,
    &-fade-leave-to {
      opacity: 0;
    }

    &-fade-enter-active,
    &-fade-leave-active {
      transition: all $duration $time-function;
    }
  }
}