// (C)opyright 2020-11-17 Dirk Holtwick, holtwick.it. All rights reserved.

// Taken from https://unpkg.com/tailwindcss@1.9.6/dist/tailwind.css

@require "base.styl"
@require "vendor.styl"

// https://stylus-lang.com/docs/keyframes.html
vendors = official

-windy_animations()
  if !(_windy_animations is a 'unit')
    define("_windy_animations", 1, true)

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes ping {
      75%, 100% {
        transform: scale(2);
        opacity: 0;
      }
    }

    @keyframes pulse {
      50% {
        opacity: .5;
      }
    }

    @keyframes bounce {
      0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
      }

      50% {
        transform: none;
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
      }
    }

-ease-linear = linear
-ease-in = cubic-bezier(0.4, 0, 1, 1)
-ease-out = cubic-bezier(0, 0, 0.2, 1)
-ease-in-out = cubic-bezier(0.4, 0, 0.2, 1)

-animation-none = none
-animation-spin = spin 1s linear infinite
-animation-ping = ping 1s cubic-bezier(0, 0, 0.2, 1) infinite
-animation-pulse = pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
-animation-bounce = bounce 1s infinite

animation-spin()
  -windy_animations()
  animation -animation-spin

animation-ping()
  -windy_animations()
  animation -animation-ping

animation-pulse()
  -windy_animations()
  animation -animation-pulse

animation-bounce()
  -windy_animations()
  animation -animation-bounce

windy-animation(value = bounce)
  def = lookup("-animation-" + value)
  if def  != null
    -windy_animations()
    animation def
  else
    error("Undefined animation preset: " + value)

//animate(duration = 100, animation = -animation-none, timing = -ease-linear, transition = -transition-default)
//  animation animation
//  transition-timing-function timing
//  transition-duration duration
//  transition-property transition

// Transformations

transform-translate(x = 0, y = 0)
  --transform-rotate-x (x)
  --transform-rotate-y (y || x)

transform-rotate(value)
  --transform-rotate unit(value, deg)

transform-scale(x = 0, y = 0)
  --transform-scale-x ((x) / 100)
  --transform-scale-y ((y || x) / 100)

transform-skew(x = 0, y = 0)
  --transform-skew-x unit(x, deg)
  --transform-skew-y unit(y || x, deg)

windy-transform()
  transform translateX(var(--transform-translate-x, 0)) translateY(var(--transform-translate-y, 0)) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1))

windy-transform-gpu()
  transform: translate3d(var(--transform-translate-x, 0), var(--transform-translate-y, 0), 0) rotate(var(--transform-rotate, 0)) skewX(var(--transform-skew-x, 0)) skewY(var(--transform-skew-y, 0)) scaleX(var(--transform-scale-x, 1)) scaleY(var(--transform-scale-y, 1));

// Transition

-transition-default = background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-transition-colors = background-color, border-color, color, fill, stroke
-transition-shadow = box-shadow

transition(value = default)
  if value is a 'ident'
    transition lookup("-transition-" + value)
  else
    transition value