.toasts-wrapper {
   position: fixed;
   top: $flash-message-offset-top;
   left: 0;
   right: 0;
   display: inline-block;
   height: 0;
   text-align: center;
   z-index: 10000;
   line-height: 0;

   .toast {
      position: relative !important;
      margin-bottom: $gap-width;
      max-width: 96%;
      border-radius: $flash-message-border-radius;
      font-size: $flash-message-font-size;
      font-weight: $flash-message-font-weight;
      padding: $flash-message-padding;
      text-align: $flash-message-text-align;
      display: inline-flex;
      align-items: flex-start;
      overflow: hidden;
      white-space: normal;
      line-height: $line-height-base;

      &::after {
         content: "";
         display: block;
         position: absolute;
         bottom: 0;
         height: 5px;
         background: $white;
         opacity: .5;
         left: 0;
         width: 100%;
         transform-origin: 0;
         animation: progress-loading ease-in 3s infinite;
      }

      p {
         margin: 0;
      }

      button {
         @include btn-reset;

         position: relative;
         line-height: 1;
         color: inherit;
         padding: 6px;
         margin-right: -6px;
         margin-left: 6px;
         cursor: pointer;
      }

      @each $name, $props in $flash-messages {
         &-#{$name} {
            @each $prop, $val in $props {
               #{$prop}: $val;
            }
         }
      }
   }
}

@keyframes progress-loading {
   0% {
      transform: scaleX(0);
   }

   100% {
      transform: scaleX(100%);
   }
}