@use "sass:map";
@use "sass:math";
@use "../variables" as *;
@use "../maps" as *;
@use "../../util/scss/add-rules.scss" as *;
@use "../../util/scss/clockwise.scss" as *;
@use "../../util/scss/deep-merge.scss" as *;
@use "../../util/scss/calc.scss" as *;
@use "../../util/scss/besm.scss" as *;
@use "../../util/scss/include.scss" as *;
@use "./Overlay.scss" as *;

@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-toast-border-radius;
      font-size: $cx-default-toast-font-size;
      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);
            }
         }
      }
   }

   .#{$element}#{$name}-beacon {
      @include cxe-overlay-beacon;
   }
}

@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();
}