@mixin cx-toast(
   $name: 'toast',
   $besm: $cx-besm,
   $mods: $cx-toast-mods
) {

   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);
   $mod: map-get($besm, mod);

   .#{$block}#{$name} {
      color: $cx-default-toast-color;
      background-color: $cx-default-toast-background-color;
      box-sizing: border-box;
      position: relative;
      pointer-events: all;
      transition: all 0.2s ease-in-out;
      box-shadow: $cx-default-toast-box-shadow;
      border-style: solid;
      border-width: $cx-default-toast-border-width;
      border-color: $cx-default-toast-border-color;
      border-radius: $cx-default-border-radius;
      display: flex;
      flex-direction: row;
      align-items: center;

      &.#{$state}pad {
         padding: $cx-default-toast-padding;
      }

      &.#{$state}animate {
         animation: cx-toast-enter-animation 0.2s;
      }

      &.#{$state}animate-enter {
         //animation-fill-mode: forwards;
      }

      &.#{$state}animate-leave {
         animation: cx-toast-leave-animation 0.2s;
         animation-fill-mode: forwards;
      }

      @each $modname, $config in $mods {
        &.#{$mod}#{$modname} {
          @include cx-add-state-rules($config, default);

          &[disabled], &.#{$state}disabled {
              @include cx-add-state-rules($config, disabled);
          }

          &:hover {
              @include cx-add-state-rules($config, hover);
          }

          &:focus {
              @include cx-add-state-rules($config, focus);
          }

          &:active, &.#{$state}pressed {
              @include cx-add-state-rules($config, active);
          }
        }
      }
   }
}

@keyframes cx-toast-enter-animation {
   from {
      transform: scale(0);
      opacity: 0;
   }

   to {
      transform: scale(1);
      opacity: 1;
   }
}

@keyframes cx-toast-leave-animation {
   to {
      transform: scale(0);
      opacity: 0;
   }

   from {
      transform: scale(1);
      opacity: 1;
   }
}

@mixin cx-toaster(
   $name: 'toaster',
   $besm: $cx-besm
) {

   $block: map-get($besm, block);
   $element: map-get($besm, element);
   $state: map-get($besm, state);

   .#{$block}#{$name} {
      position: fixed;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      overflow: hidden;
      z-index: 1000000;

      &.#{$state}placement-right {
         justify-content: center;
         align-items: flex-end;
      }

      &.#{$state}placement-left {
         justify-content: center;
         align-items: flex-start;
      }

      &.#{$state}placement-bottom {
         flex-direction: column-reverse;
      }

      &.#{$state}placement-top-left {
         align-items: flex-start;
      }

      &.#{$state}placement-top-right {
         align-items: flex-end;
      }

      &.#{$state}placement-bottom-left {
         justify-content: flex-end;
         align-items: flex-start;
      }

      &.#{$state}placement-bottom-right {
         justify-content: flex-end;
         align-items: flex-end;
      }
   }

   .#{$element}#{$name}-item {
      margin: 0;
      height: 0;
      transition: all 0.2s ease-in-out;

      &.#{$state}live {
         margin: 10px;
      }
   }
}

@if (cx-should-include('cx/widgets/Toast')) {
   @include cx-toast();
   @include cx-toaster();
}