@use 'internal' as *;
@use 'variables' as *;
@use 'functions' as *;

@mixin xyz-fancy () {
  @include xyz-include-once('fancy') {
    @include xyz-make-keyframes('expand-width') using ($mode) {
      from {
        max-width: 0;
        overflow: hidden;
      }
      to {
        max-width: xyz-var('max-width', $mode, 100vw);
        overflow: hidden;
      }
    }

    @include xyz-make-keyframes('expand-height') using ($mode) {
      from {
        max-height: 0;
        overflow: hidden;
      }
      to {
        max-height: xyz-var('max-height', $mode, 100vh);
        overflow: hidden;
      }
    }

    @include xyz-make-keyframes('expand-border-radius') using ($mode) {
      from {
        border-radius: xyz-var('border-radius', $mode, 50%);
        overflow: hidden;
      }
      to {
        overflow: hidden;
      }
    }

    @include xyz-make-keyframes('filter-blur') using ($mode) {
      from {
        filter: #{'blur'}(#{xyz-var('filter-blur', $mode, 10px)});
      }
    }

    @include xyz-make-keyframes('filter-grayscale') using ($mode) {
      from {
        filter: #{'grayscale'}(#{xyz-var('filter-grayscale', $mode, 100%)});
      }
    }

    @include xyz-make-keyframes('box-shadow') using ($mode) {
      from {
        box-shadow: #{xyz-var('box-shadow', $mode, 0px 0px 10px rgba(0,0,0,.5))};
      }
    }

    @include xyz-make-keyframes('stroke-draw') using ($mode) {
      from {
        stroke-dashoffset: xyz-var('stroke-length', $mode, 100);
        stroke-dasharray: xyz-var('stroke-length', $mode, 100) xyz-var('stroke-length', $mode, 100);
      }
    }
  }
}