/* For linear/conic gradient */
@property --gradient-angle {
  syntax: '<angle> | <custom-ident>+';
  initial-value: 180deg;
  inherits: true;
}

/* For radial gradient. */
@property --gradient-shape {
  syntax: 'circle | ellipse';
  initial-value: ellipse;
  inherits: true;
}

/* For radial/conic gradient */
@property --gradient-position {
  syntax: '<length-percentage>+ | <custom-ident>+';
  initial-value: 50% 50%;
  inherits: true;
}

/* For radial-gradient */
@property --gradient-size {
  syntax: '<length-percentage>+ | closest-side | closest-corner | farthest-side | farthest-corner';
  initial-value: farthest-corner;
  inherits: true;
}

/*********************
 * Custom functions - Useful when @functions have baseline support *
 *********************/
@function --linear-gradient(--gradient) {
  result: linear-gradient(
    var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
    var(--gradient, var(--tw-gradient))
  );
}

@function --radial-gradient(--gradient) {
  result: radial-gradient(
    var(--gradient-shape) var(--gradient-size) at var(--gradient-position) in
      var(--color-space) var(--hue-interpolation),
    var(--gradient, var(--tw-gradient))
  );
}

@function --conic-gradient(--gradient) {
  result: conic-gradient(
    from var(--gradient-angle) at var(--gradient-position) in var(--color-space)
      var(--hue-interpolation),
    var(--gradient, var(--tw-gradient))
  );
}

/* Gradient Defaults */
@layer base {
  :root {
    /* --gradient: ; */
    --color-space: oklch;
    --hue-interpolation: ;
  }
}

@utility tw-gradient {
  --tw-gradient:
    var(--tw-gradient-from) var(--tw-gradient-from-position),
    var(--tw-gradient-to) var(--tw-gradient-to-position);
}

@utility gradient {
  @apply tw-gradient;
  background-image: linear-gradient(
    var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
    var(--gradient, var(--tw-gradient))
  );
}

@utility linear-gradient {
  @apply gradient;
}

@utility radial-gradient {
  @apply tw-gradient;
  background-image: radial-gradient(
    var(--gradient-shape) var(--gradient-size) at var(--gradient-position) in
      var(--color-space) var(--hue-interpolation),
    var(--gradient, var(--tw-gradient))
  );
}

@utility conic-gradient {
  @apply tw-gradient;
  background-image: conic-gradient(
    from var(--gradient-angle) at var(--gradient-position) in var(--color-space)
      var(--hue-interpolation),
    var(--gradient, var(--tw-gradient))
  );
}

@utility text-gradient {
  @apply gradient;
  display: inline-flex;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Allows multiline gradients in Safari */
  box-decoration-break: clone;
}

@utility gradient-text {
  @apply gradient;
  display: inline-flex;
  -webkit-text-fill-color: transparent;
  background-clip: text;

  /* Allows multiline gradients in Safari */
  box-decoration-break: clone;
}

/*********************
 * Repeating Gradients *
 * Needs more testing
 *********************/
@utility repeating-linear-gradient {
  & {
    background-image: repeating-linear-gradient(
      var(--gradient-angle),
      var(--gradient)
    );

    @supports (linear-gradient(in oklch)) {
      background-image: repeating-linear-gradient(
        var(--gradient-angle) in var(--color-space) var(--hue-interpolation),
        var(--gradient)
      );
    }
  }
}

@utility repeating-radial-gradient {
  & {
    background-image: repeating-radial-gradient(
      var(--gradient-shape) var(--gradient-size) at var(--gradient-position),
      var(--tw-gradient-stops, var(--gradient))
    );
  }
}

@utility repeating-conic-gradient {
  & {
    background-image: repeating-conic-gradient(
      from var(--gradient-angle) at var(--gradient-position),
      var(--tw-gradient-stops, var(--gradient))
    );
  }
}

/*********************
 * Functional Utiliites for Gradients *
 *********************/
/* prettier-ignore */
@utility gradient-angle-* {
  --gradient-angle: --value(number)deg;
  --gradient-angle: --value([angle]);
}

/* @utility gradient-position-* {
  --gradient-position: --value([position]);
}

@utility gradient-shape-* {
  --gradient-shape: --value([shape]);
} */

@utility gradient-* {
  --gradient-shape: --value('circle', 'ellipse');
}