body {
  &.swal2-toast-shown {
    &.swal2-has-input  > .swal2-container {
      & > .swal2-toast {
        flex-direction: column;
        align-items: stretch;

        .swal2-actions {
          flex: 1;
          align-self: stretch;
          justify-content: flex-end;
          height: 2.2em;
        }

        .swal2-loading {
          justify-content: center;
        }

        .swal2-input {
          height: 2em;
          margin: .3125em auto;
          font-size: $swal2-toast-input-font-size;
        }

        .swal2-validationerror {
          font-size: $swal2-toast-validation-font-size;
        }
      }
    }

    & > .swal2-container {
      position: fixed;
      background-color: transparent;

      &.swal2-shown {
        background-color: transparent;
      }

      &.swal2-top {
        top: 0;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translateX(-50%);
      }

      &.swal2-top-end,
      &.swal2-top-right {
        top: 0;
        right: 0;
        bottom: auto;
        left: auto;
      }

      &.swal2-top-start,
      &.swal2-top-left {
        top: 0;
        right: auto;
        bottom: auto;
        left: 0;
      }

      &.swal2-center-start,
      &.swal2-center-left {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 0;
        transform: translateY(-50%);
      }

      &.swal2-center {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      &.swal2-center-end,
      &.swal2-center-right {
        top: 50%;
        right: 0;
        bottom: auto;
        left: auto;
        transform: translateY(-50%);
      }

      &.swal2-bottom-start,
      &.swal2-bottom-left {
        top: auto;
        right: auto;
        bottom: 0;
        left: 0;
      }

      &.swal2-bottom {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }

      &.swal2-bottom-end,
      &.swal2-bottom-right {
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
      }
    }
  }
}

.swal2-popup {
  &.swal2-toast {
    flex-direction: row;
    align-items: center;
    width: $swal2-toast-width;
    padding: $swal2-toast-padding;
    box-shadow: 0 0 10px $swal2-box-shadow;
    overflow-y: hidden;

    .swal2-header {
      flex-direction: row;
    }

    .swal2-title {
      justify-content: flex-start;
      margin: 0 .6em;
      font-size: $swal2-toast-title-font-size;
    }

    .swal2-close {
      position: initial;
    }

    .swal2-content {
      justify-content: flex-start;
      font-size: $swal2-toast-content-font-size;
    }

    .swal2-icon {
      width: 32px;
      min-width: 32px;
      height: 32px;
      margin: 0;

      &.swal2-success {

        .swal2-success-ring {
          width: 32px;
          height: 32px;
        }
      }

      &.swal2-info,
      &.swal2-warning,
      &.swal2-question {
        font-size: 26px;
        line-height: 32px;
      }

      &.swal2-error {

        [class^='swal2-x-mark-line'] {
          top: 14px;
          width: 22px;

          &[class$='left'] {
            left: 5px;
          }

          &[class$='right'] {
            right: 5px;
          }
        }
      }
    }

    .swal2-actions {
      height: auto;
      margin: 0 .3125em;
    }

    .swal2-styled {
      margin: 0 .3125em;
      padding: .3125em .625em;
      font-size: $swal2-toast-buttons-font-size;

      &:focus {
        box-shadow: 0 0 0 1px $swal2-white, 0 0 0 2px $swal2-button-focus-outline;
      }
    }

    .swal2-success {
      border-color: $swal2-success;

      [class^='swal2-success-circular-line'] { // Emulate moving circular line
        position: absolute;
        width: 32px;
        height: 45px;
        transform: rotate(45deg);
        border-radius: 50%;

        &[class$='left'] {
          top: -4px;
          left: -15px;
          transform: rotate(-45deg);
          transform-origin: 32px 32px;
          border-radius: 64px 0 0 64px;
        }

        &[class$='right'] {
          top: -4px;
          left: 15px;
          transform-origin: 0 32px;
          border-radius: 0 64px 64px 0;
        }
      }

      .swal2-success-ring {
        width: 32px;
        height: 32px;
      }

      .swal2-success-fix {
        top: 0;
        left: 7px;
        width: 7px;
        height: 43px;
      }

      [class^='swal2-success-line'] {
        height: 5px;

        &[class$='tip'] {
          top: 18px;
          left: 3px;
          width: 12px;
        }

        &[class$='long'] {
          top: 15px;
          right: 3px;
          width: 22px;
        }
      }
    }

    &.swal2-show {
      animation: showSweetToast .5s;
    }

    &.swal2-hide {
      animation: hideSweetToast .2s forwards;
    }

    .swal2-animate-success-icon {
      .swal2-success-line-tip {
        animation: animate-toast-success-tip .75s;
      }

      .swal2-success-line-long {
        animation: animate-toast-success-long .75s;
      }
    }
  }
}

// Animations
@keyframes showSweetToast {
  0% {
    transform: translateY(-10px) rotateZ(2deg);
    opacity: 0;
  }

  33% {
    transform: translateY(0) rotateZ(-2deg);
    opacity: .5;
  }

  66% {
    transform: translateY(5px) rotateZ(2deg);
    opacity: .7;
  }

  100% {
    transform: translateY(0) rotateZ(0);
    opacity: 1;
  }
}

@keyframes hideSweetToast {
  0% {
    opacity: 1;
  }

  33% {
    opacity: .5;
  }

  100% {
    transform: rotateZ(1deg);
    opacity: 0;
  }
}

@keyframes animate-toast-success-tip {
  0% {
    top: 9px;
    left: 1px;
    width: 0;
  }

  54% {
    top: 2px;
    left: 2px;
    width: 0;
  }

  70% {
    top: 10px;
    left: -4px;
    width: 26px;
  }

  84% {
    top: 17px;
    left: 12px;
    width: 8px;
  }

  100% {
    top: 18px;
    left: 3px;
    width: 12px;
  }
}

@keyframes animate-toast-success-long {
  0% {
    top: 26px;
    right: 22px;
    width: 0;
  }

  65% {
    top: 20px;
    right: 15px;
    width: 0;
  }

  84% {
    top: 15px;
    right: 0;
    width: 18px;
  }

  100% {
    top: 15px;
    right: 3px;
    width: 22px;
  }
}