@mixin keyframes($name) {
  @-webkit-keyframes #{$name} {
    @content;
  }
  @-moz-keyframes #{$name} {
    @content;
  }
  @keyframes #{$name} {
    @content;
  }
}

// *******************************************************************************
// * Loader

.la-ball-fall,
.la-ball-fall > div {
  position: relative;
  box-sizing: border-box;
}

.la-ball-fall {
  display: block;
  color: #fff;
  font-size: 0;
}

.la-ball-fall.la-dark {
  color: #333;
}

.la-ball-fall > div {
  display: inline-block;
  float: none;
  border: 0 solid currentColor;
  background-color: currentColor;
}

.la-ball-fall {
  width: 3.375rem;
  height: 1.125rem;
}

.la-ball-fall > div {
  margin: .25rem;
  width: .625rem;
  height: .625rem;
  border-radius: 100%;
  opacity: 0;
  animation: ball-fall 1s ease-in-out infinite;
}

.la-ball-fall > div:nth-child(1) {
  animation-delay: -200ms;
}

.la-ball-fall > div:nth-child(2) {
  animation-delay: -100ms;
}

.la-ball-fall > div:nth-child(3) {
  animation-delay: 0ms;
}

.la-ball-fall.la-sm {
  width: 1.625rem;
  height: .5rem;
}

.la-ball-fall.la-sm > div {
  margin: .125rem;
  width: .25rem;
  height: .25rem;
}

.la-ball-fall.la-2x {
  width: 6.75rem;
  height: 2.25rem;
}

.la-ball-fall.la-2x > div {
  margin: .5rem;
  width: 1.25rem;
  height: 1.25rem;
}

.la-ball-fall.la-3x {
  width: 10.125rem;
  height: 3.375rem;
}

.la-ball-fall.la-3x > div {
  margin: .75rem;
  width: 1.875rem;
  height: 1.875rem;
}

// *******************************************************************************
// * Keyframes

@include keyframes(ball-fall) {
  0% {
    opacity: 0;
    transform: translateY(-145%);
  }
  10% {
    opacity: .5;
  }
  20% {
    opacity: 1;
    transform: translateY(0);
  }
  80% {
    opacity: 1;
    transform: translateY(0);
  }
  90% {
    opacity: .5;
  }
  100% {
    opacity: 0;
    transform: translateY(145%);
  }
}

@include keyframes(showSweetAlert) {
  0% {
    transform: scale(.7);
  }
  45% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(.95);
  }
  100% {
    transform: scale(1);
  }
}

@include keyframes(hideSweetAlert) {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(.5);
  }
};

@include keyframes(slideFromTop) {
  0% {
    top: 0;
  }
  100% {
    top: 50%;
  }
};

@include keyframes(slideToTop) {
  0% {
    top: 50%;
  }
  100% {
    top: 0;
  }
};

@include keyframes(slideFromBottom) {
  0% {
    top: 70%;
  }
  100% {
    top: 50%;
  }
}

@include keyframes(slideToBottom) {
  0% {
    top: 50%;
  }
  100% {
    top: 70%;
  }
}

@include keyframes(animateSuccessTip) {
  0% {
    top: 1.1875rem;
    left: .0625rem;
    width: 0;
  }
  54% {
    top: 1.1875rem;
    left: .0625rem;
    width: 0;
  }
  70% {
    top: 2.3125rem;
    left: -.5rem;
    width: 3.125rem;
  }
  84% {
    top: 3rem;
    left: 1.3125rem;
    width: 1.0625rem;
  }
  100% {
    top: 2.8125rem;
    left: .875rem;
    width: 1.5625rem;
  }
}

@include keyframes(animateSuccessLong) {
  0% {
    top: 3.375rem;
    right: 2.875rem;
    width: 0;
  }
  65% {
    top: 3.375rem;
    right: 2.875rem;
    width: 0;
  }
  84% {
    top: 2.1875rem;
    right: 0;
    width: 3.4375rem;
  }
  100% {
    top: 2.375rem;
    right: .5rem;
    width: 2.9375rem;
  }
}

@include keyframes(rotatePlaceholder) {
  0% {
    transform: rotate(-45deg);
  }
  5% {
    transform: rotate(-45deg);
  }
  12% {
    transform: rotate(-405deg);
  }
  100% {
    transform: rotate(-405deg);
  }
}

@include keyframes(animateErrorIcon) {
  0% {
    opacity: 0;
    transform: rotateX(100deg);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg);
  }
}

@include keyframes(animateXMark) {
  0% {
    margin-top: 1.625rem;
    opacity: 0;
    transform: scale(.4);
  }
  50% {
    margin-top: 1.625rem;
    opacity: 0;
    transform: scale(.4);
  }
  80% {
    margin-top: -.375rem;
    transform: scale(1.15);
  }
  100% {
    margin-top: 0;
    opacity: 1;
    transform: scale(1);
  }
}

@include keyframes(pulseWarning) {
  0% {
    border-color: #f8d486;
  }
  100% {
    border-color: #f8bb86;
  }
}

@include keyframes(pulseWarningIns) {
  0% {
    background-color: #f8d486;
  }
  100% {
    background-color: #f8bb86;
  }
}

@include keyframes(rotate-loading) {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// *******************************************************************************
// * Animations

.showSweetAlert {
  animation: showSweetAlert .3s;

  &[data-animation=none] {
    animation: none;
  }

  &[data-animation=slide-from-top] {
    animation: slideFromTop .3s;
  }

  &[data-animation=slide-from-bottom] {
    animation: slideFromBottom .3s;
  }
}

.hideSweetAlert {
  animation: hideSweetAlert .3s;

  &[data-animation=none] {
    animation: none;
  }

  &[data-animation=slide-from-top] {
    animation: slideToTop .3s;
  }

  &[data-animation=slide-from-bottom] {
    animation: slideToBottom .3s;
  }
}

.animateSuccessTip {
  animation: animateSuccessTip .75s;
}

.animateSuccessLong {
  animation: animateSuccessLong .75s;
}

.sa-icon.sa-success.animate::after {
  animation: rotatePlaceholder 4.25s ease-in;
}

.animateErrorIcon {
  animation: animateErrorIcon .5s;
}

.animateXMark {
  animation: animateXMark .5s;
}

.pulseWarning {
  animation: pulseWarning .75s infinite alternate;
}

.pulseWarningIns {
  animation: pulseWarningIns .75s infinite alternate;
}

// *******************************************************************************
// * Styles

body.stop-scrolling {
  overflow: hidden;
  height: 100%;
}

.sweet-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
}

.sweet-alert {
  $width: 29.875rem;
  $padding: 1.0625rem;

  background-color: #fff;
  width: $width;
  padding: $padding;
  text-align: center;
  margin-left: -$width / 2;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -12.5rem;
  overflow: hidden;
  display: none;
  outline: 0 !important;
}

.sweet-alert h2,
.sweet-alert .sa-button-container {
  margin-top: 1.875rem;
}

.sweet-alert .form-group {
  display: none;

  .sa-input-error {
    display: none;
  }
}

.sweet-alert.show-input .form-group {
  display: block;
}

.sweet-alert .sa-confirm-button-container {
  position: relative;
  display: inline-block;
}

.sweet-alert .la-ball-fall {
  position: absolute;
  top: 50%;
  left: 50%;
  visibility: hidden;
  margin-top: -.5625rem;
  margin-left: -1.6875rem;
  opacity: 0;
}

.sweet-alert button {
  &[disabled] {
    opacity: .6;
    cursor: default;
  }

  &.confirm[disabled] {
    color: transparent;
  }

  &.confirm[disabled] ~ .la-ball-fall {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
}

// *******************************************************************************
// * Icons

.sweet-alert .sa-icon {
  position: relative;
  box-sizing: content-box;
  margin: 1.25rem auto;
  width: 5rem;
  height: 5rem;
  border: 4px solid gray;
  border-radius: 50%;

  [dir=rtl] & {
    transform: scaleX(-1);
  }
}

// Error icon
.sweet-alert .sa-icon.sa-error {
  .sa-x-mark {
    position: relative;
    display: block;
  }

  .sa-line {
    position: absolute;
    top: 2.3125rem;
    display: block;
    width: 2.9375rem;
    height: .3125rem;
    border-radius: .125rem;

    &.sa-left {
      left: 1.0625rem;
      transform: rotate(45deg);
    }

    &.sa-right {
      right: 1rem;
      transform: rotate(-45deg);
    }
  }
}

// Warning icon
.sweet-alert .sa-icon.sa-warning {
  .sa-body {
    // Exclamation mark body
    position: absolute;
    top: .625rem;
    left: 50%;
    margin-left: -.125rem;
    width: .3125rem;
    height: 2.9375rem;
    border-radius: .125rem;
  }

  .sa-dot {
    // Exclamation mark dot
    position: absolute;
    bottom: .625rem;
    left: 50%;
    margin-left: -.1875rem;
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
  }
}

// Info icon
.sweet-alert .sa-icon.sa-info {
  &::before {
    // i-letter body
    content: "";
    position: absolute;
    bottom: 1.0625rem;
    left: 50%;
    margin-left: -.125rem;
    width: .3125rem;
    height: 1.8125rem;
    border-radius: .125rem;
  }

  &::after {
    // i-letter dot
    content: "";
    position: absolute;
    top: 1.1875rem;
    left: 50%;
    margin-left: -.1875rem;
    width: .4375rem;
    height: .4375rem;
    border-radius: 50%;
  }
}

// Success icon
.sweet-alert .sa-icon.sa-success {
  &::before,
  &::after {
    // Emulate moving circular line
    content: '';
    position: absolute;
    width: 3.75rem;
    height: 7.5rem;
    border-radius: 50%;
    background: #fff;
    transform: rotate(45deg);
  }

  &::before {
    top: -.4375rem;
    left: -2.0625rem;
    border-radius: 7.5rem 0 0 7.5rem;
    transform: rotate(-45deg);
    transform-origin: 3.75rem 3.75rem;
  }

  &::after {
    top: -.6875rem;
    left: 1.875rem;
    border-radius: 0 7.5rem 7.5rem 0;
    transform: rotate(-45deg);
    transform-origin: 0 3.75rem;
  }

  .sa-placeholder {
    // Ring
    position: absolute;
    top: -.25rem;
    left: -.25rem;
    z-index: 2;
    box-sizing: content-box;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
  }

  .sa-fix {
    position: absolute;
    top: .5rem;
    left: 1.75rem;
    z-index: 1;
    width: .3125rem;
    height: 5.625rem;
    background-color: #fff;
    transform: rotate(-45deg);
  }

  .sa-line {
    position: absolute;
    z-index: 2;
    display: block;
    height: .3125rem;
    border-radius: .125rem;

    &.sa-tip {
      top: 2.875rem;
      left: .875rem;
      width: 1.5625rem;
      transform: rotate(45deg);
    }

    &.sa-long {
      top: 2.375rem;
      right: .5rem;
      width: 2.9375rem;
      transform: rotate(-45deg);
    }
  }
}

// Custom icon
.sweet-alert .sa-icon.sa-custom {
  border: none;
  border-radius: 0;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}

.default-style {
  @import "../../css/_appwork/include";

  .sweet-alert {
    z-index: $zindex-modal-top;
  }

  .sweet-alert .popover {
    z-index: $zindex-modal-top + 1;
  }

  .sweet-alert .tooltip {
    z-index: $zindex-modal-top + 2;
  }

  .sweet-overlay {
    z-index: $zindex-modal-top - 1;
    background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
  }

  .sweet-alert {
    border-radius: $border-radius;
    box-shadow: $modal-content-box-shadow-xs;

    @media all and (max-width: (map-get($grid-breakpoints, sm) - 1px)) {
      right: ($grid-gutter-width / 2);
      left: ($grid-gutter-width / 2);
      margin-right: 0;
      margin-left: 0;
      width: auto;
    }
  }

  .sweet-alert .sa-icon.sa-error {
    border-color: map-get($theme-colors, danger);

    .sa-line {
      background-color: map-get($theme-colors, danger);
    }
  }

  .sweet-alert .sa-icon.sa-warning {
    border-color: map-get($theme-colors, warning);

    .sa-body {
      // Exclamation mark body
      background-color: map-get($theme-colors, warning);
    }

    .sa-dot {
      // Exclamation mark dot
      background-color: map-get($theme-colors, warning);
    }
  }

  .sweet-alert .sa-icon.sa-info {
    border-color: map-get($theme-colors, info);

    &::before {
      // i-letter body
      background-color: map-get($theme-colors, info);
    }

    &::after {
      // i-letter dot
      background-color: map-get($theme-colors, info);
    }
  }

  .sweet-alert .sa-icon.sa-success {
    border-color: map-get($theme-colors, success);

    .sa-placeholder {
      // Ring
      border: 4px solid rgba(map-get($theme-colors, success), .2);
    }

    .sa-line {
      background-color: map-get($theme-colors, success);
    }
  }
}

.material-style {
  @import "../../css/_appwork/include-material";

  .sweet-alert {
    z-index: $zindex-modal-top;
  }

  .sweet-alert .popover {
    z-index: $zindex-modal-top + 1;
  }

  .sweet-alert .tooltip {
    z-index: $zindex-modal-top + 2;
  }

  .sweet-overlay {
    z-index: $zindex-modal-top - 1;
    background-color: rgba($modal-backdrop-bg, $modal-backdrop-opacity);
  }

  .sweet-alert {
    box-shadow: $modal-content-box-shadow-xs;

    @media all and (max-width: (map-get($grid-breakpoints, sm) - 1px)) {
      right: ($grid-gutter-width / 2);
      left: ($grid-gutter-width / 2);
      margin-right: 0;
      margin-left: 0;
      width: auto;
    }
  }

  .sweet-alert .sa-icon.sa-error {
    border-color: map-get($theme-colors, danger);

    .sa-line {
      background-color: map-get($theme-colors, danger);
    }
  }
  .sweet-alert .sa-icon.sa-warning {
    border-color: map-get($theme-colors, warning);

    .sa-body {
      // Exclamation mark body
      background-color: map-get($theme-colors, warning);
    }
    
    .sa-dot {
      // Exclamation mark dot
      background-color: map-get($theme-colors, warning);
    }
  }
  .sweet-alert .sa-icon.sa-info {
    border-color: map-get($theme-colors, info);

    &::before {
      // i-letter body
      background-color: map-get($theme-colors, info);
    }

    &::after {
      // i-letter dot
      background-color: map-get($theme-colors, info);
    }
  }
  .sweet-alert .sa-icon.sa-success {
    border-color: map-get($theme-colors, success);

    .sa-placeholder {
      // Ring
      border: 4px solid rgba(map-get($theme-colors, success), .2);
    }

    .sa-line {
      background-color: map-get($theme-colors, success);
    }
  }
}