:root {
  /* --inner-gradient: linear-gradient(var(--gradient-angle), #563444, #4ecdc4); */
  /* --bg-color: transparent;
  --outer-gradient: linear-gradient(
    var(--gradient-angle) in oklch,
    rgb(112 190 190) 0%,
    rgb(13 13 98)
  );
  --text-color: white; */
}

/* Useful for creating gradient border with solid color within. Not very useful if you wanna stack gradients together and bleed it out. */
@utility fancybox {
  @apply border-scaffold;
  --b: var(--border-width);
  --r: var(--radius);
  --_inner-gradient: linear-gradient(
    var(--inner-gradient-angle, var(--gradient-angle)) in
      var(--inner-gradient-color-space, var(--color-space))
      var(--inner-gradient-hue-interpolation, var(--hue-interpolation)),
    var(
      --inner-gradient,
      var(--bg-color, transparent),
      var(--bg-color, transparent)
    )
  );
  --_outer-gradient: linear-gradient(
    var(--outer-gradient-angle, var(--gradient-angle)) in
      var(--outer-gradient-color-space, var(--color-space))
      var(--outer-gradient-hue-interpolation, var(--hue-interpolation)),
    var(
      --outer-gradient,
      var(--border-color, transparent),
      var(--border-color, transparent)
    )
  );
  position: relative;
  border-width: var(--b);
  border-color: transparent;
  color: var(--text-color);
  background:
    padding-box var(--_inner-gradient),
    border-box var(--_outer-gradient);

  /* animation: rotate-angle 10s linear infinite paused; */
}

/* Creates a border on the fancybox so the gradient bleeds onto the border. */
@utility fancybox-bleed-border {
  &::after {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(-1 * var(--border-width));
    border: var(--border-width) var(--border-style) var(--border-color);
    border-radius: inherit;
  }
}

@utility fancybox-arrow {
  & {
    @apply fancybox;
    --a: var(--arrow-angle, 90deg);
    --h: var(--arrow-height, 0.75em);
    --p: var(--arrow-position, 50%);
    overflow: visible;
    z-index: 0;
  }

  &.arrow-top,
  &.arrow-bottom {
    background-size: 100% calc(100% + var(--h));
  }

  &.arrow-left,
  &.arrow-right {
    background-size: calc(100% + var(--h)) 100%;
  }

  &::before,
  &::after {
    content: '';
    position: absolute;
    inset: calc(-1 * var(--b));
    z-index: -1;
    background: inherit;
  }

  &::before {
    background-size:
      0 0,
      100% 100%;
  }

  &::after {
    border: inherit;
    background-size:
      100% 100%,
      0 0;
  }

  &.arrow-top {
    border-radius: min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r)
      var(--r) / var(--r);
    background-position: bottom;

    &::before,
    &::after {
      top: calc(-1 * var(--b) - var(--h));
    }

    &::before {
      clip-path: polygon(
        min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
          calc(var(--h) + var(--b)),
        min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) var(--h),
        var(--p) 0,
        max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) var(--h),
        max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
          calc(var(--h) + var(--b))
      );
    }

    &::after {
      clip-path: polygon(
        min(
            100% - var(--b),
            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
              tan(45deg - var(--a) / 4)
          )
          calc(var(--h) + var(--b)),
        var(--p) calc(var(--b) / sin(var(--a) / 2)),
        max(
            var(--b),
            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
              tan(45deg - var(--a) / 4)
          )
          calc(var(--h) + var(--b)),
        50% 50%
      );
    }
  }

  &.arrow-bottom {
    border-radius: var(--r) var(--r)
      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2))
      min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) / var(--r);

    &::before,
    &::after {
      bottom: calc(-1 * var(--b) - var(--h));
    }

    &::before {
      clip-path: polygon(
        min(100%, var(--p) + var(--h) * tan(var(--a) / 2))
          calc(100% - var(--h) - var(--b)),
        min(100%, var(--p) + var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
        var(--p) 100%,
        max(0%, var(--p) - var(--h) * tan(var(--a) / 2)) calc(100% - var(--h)),
        max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
          calc(100% - var(--h) - var(--b))
      );
    }

    &::after {
      clip-path: polygon(
        min(
            100% - var(--b),
            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
              tan(45deg - var(--a) / 4)
          )
          calc(100% - var(--h) - var(--b)),
        var(--p) calc(100% - var(--b) / sin(var(--a) / 2)),
        max(
            var(--b),
            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
              tan(45deg - var(--a) / 4)
          )
          calc(100% - var(--h) - var(--b)),
        50% 50%
      );
    }
  }

  &.arrow-left {
    border-radius: var(--r) /
      min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2)) var(--r) var(--r)
      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2));
    background-position: right;

    &::before,
    &::after {
      left: calc(-1 * var(--b) - var(--h));
    }

    &::before {
      clip-path: polygon(
        calc(var(--h) + var(--b))
          min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
        var(--h) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
        0 var(--p),
        var(--h) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
        calc(var(--h) + var(--b))
          max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
      );
    }

    &::after {
      clip-path: polygon(
        calc(var(--h) + var(--b))
          min(
            100% - var(--b),
            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
              tan(45deg - var(--a) / 4)
          ),
        calc(var(--b) / sin(var(--a) / 2)) var(--p),
        calc(var(--h) + var(--b))
          max(
            var(--b),
            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
              tan(45deg - var(--a) / 4)
          ),
        50% 50%
      );
    }
  }

  &.arrow-right {
    border-radius: var(--r) / var(--r)
      min(var(--r), var(--p) - var(--h) * tan(var(--a) / 2))
      min(var(--r), 100% - var(--p) - var(--h) * tan(var(--a) / 2)) var(--r);

    &::before,
    &::after {
      right: calc(-1 * var(--b) - var(--h));
    }

    &::before {
      clip-path: polygon(
        calc(100% - var(--h) - var(--b))
          min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
        calc(100% - var(--h)) min(100%, var(--p) + var(--h) * tan(var(--a) / 2)),
        100% var(--p),
        calc(100% - var(--h)) max(0%, var(--p) - var(--h) * tan(var(--a) / 2)),
        calc(100% - var(--h) - var(--b))
          max(0%, var(--p) - var(--h) * tan(var(--a) / 2))
      );
    }

    &::after {
      clip-path: polygon(
        calc(100% - var(--h) - var(--b))
          min(
            100% - var(--b),
            var(--p) + var(--h) * tan(var(--a) / 2) - var(--b) *
              tan(45deg - var(--a) / 4)
          ),
        calc(100% - var(--b) / sin(var(--a) / 2)) var(--p),
        calc(100% - var(--h) - var(--b))
          max(
            var(--b),
            var(--p) - var(--h) * tan(var(--a) / 2) + var(--b) *
              tan(45deg - var(--a) / 4)
          ),
        50% 50%
      );
    }
  }
}

@keyframes rotate-angle {
  from {
    --gradient-angle: 0deg;
  }

  to {
    --gradient-angle: 360deg;
  }
}