@utility bezel {
  @apply border-scaffold;
  --x: 50%;
  --y: 50%;
  --dist: 0px;
  --b: var(--border-width);
  --r: var(--radius);
  position: relative;
  border-color: transparent;
  background:
    var(--inner-gradient, none),
    linear-gradient(var(--bg-color, transparent), var(--bg-color, transparent)),
    var(--outer-gradient, none);
  background-origin: padding-box, padding-box, border-box;
  background-clip: padding-box, padding-box, border-box;
}

/*********************
 * Inner & Outer gradients *
 *********************/
@utility inner-radial {
  --_shape: var(--inner-shape, var(--gradient-shape));
  --_size: var(--inner-size, var(--gradient-size));
  --_position: var(--inner-position, var(--gradient-position));
  --inner-gradient: radial-gradient(
    var(--_shape) var(--_size) at var(--_position) in var(--color-space)
      var(--hue-interpolation),
    var(--inner-stops)
  );
}

@utility outer-radial {
  --_shape: var(--outer-shape, var(--gradient-shape));
  --_size: var(--outer-size, var(--gradient-size));
  --_position: var(--outer-position, var(--gradient-position));
  --outer-gradient: radial-gradient(
    var(--_shape) var(--_size) at var(--_position) in var(--color-space)
      var(--hue-interpolation),
    var(--outer-stops)
  );
}

@utility inner-linear {
  --_angle: var(--inner-angle, var(--gradient-angle));
  --inner-gradient: linear-gradient(
    var(--_angle) in var(--color-space) var(--hue-interpolation),
    var(--inner-stops)
  );
}

@utility outer-linear {
  --_angle: var(--outer-angle, var(--gradient-angle));
  --outer-gradient: linear-gradient(
    var(--_angle) in var(--color-space) var(--hue-interpolation),
    var(--outer-stops)
  );
}

@utility inner-conic {
  --_angle: var(--inner-angle, var(--gradient-angle));
  --_position: var(--inner-position, var(--gradient-position));
  --inner-gradient: conic-gradient(
    from var(--_angle) at var(--_position) in var(--color-space)
      var(--hue-interpolation),
    var(--inner-stops)
  );
}

@utility outer-conic {
  --_angle: var(--outer-angle, var(--gradient-angle));
  --_position: var(--outer-position, var(--gradient-position));
  --outer-gradient: conic-gradient(
    from var(--_angle) at var(--_position) in var(--color-space)
      var(--hue-interpolation),
    var(--outer-stops)
  );
}

/*********************
 * Spotlight *
 *********************/
@utility spotlight {
  --proximity: max(
    0,
    1 - var(--dist, 9999px) /
      max(var(--inner-size, 0px), var(--outer-size, 200px))
  );
}

/*********************
 * Bezel frost *
 * Frosted variant. Ring lives on ::before so the element itself can carry backdrop-filter with no opaque layers in the way. 
 *********************/
/* stylelint-disable nesting-selector-no-missing-scoping-root */
@utility bezel-frost {
  @apply border-scaffold;
  --b: var(--border-width);
  --r: var(--radius);
  --frost: 16px;
  position: relative;
  border-color: transparent;
  backdrop-filter: blur(var(--frost));

  &::before {
    content: '';
    pointer-events: none;
    position: absolute;
    inset: calc(-1 * var(--b));
    padding: var(--b);
    border-radius: inherit;
    background: var(--outer-gradient, none);
    mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
}

/*********************
 * Bezel Arrow *
 * Creates arrows with bezel-arrow-* where * is top|bottom|left|right . 
 * Uses both before and pseudo elements. 
 *********************/
@utility bezel-arrow {
  @apply bezel;
  --a: var(--arrow-angle, 90deg);
  --h: var(--arrow-height, 0.75em);
  --p: var(--arrow-position, 50%);
  overflow: visible;
  z-index: 0;

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

  /* Per-layer sizes match the three-layer stack: inner, bg-color, outer.
   * ::before = outer-only (the rim slice over the arrow tail).
   * ::after  = card-interior slice (inner + bg-color, no outer). */
  &::before {
    background-size:
      0 0,
      0 0,
      100% 100%;
  }

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

@utility bezel-arrow-top {
  @apply bezel-arrow;
  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;
  background-size: 100% calc(100% + var(--h));

  &::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%
    );
  }
}

@utility bezel-arrow-bottom {
  @apply bezel-arrow;
  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);
  background-size: 100% calc(100% + var(--h));

  &::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%
    );
  }
}

@utility bezel-arrow-left {
  @apply bezel-arrow;
  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;
  background-size: calc(100% + var(--h)) 100%;

  &::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%
    );
  }
}

@utility bezel-arrow-right {
  @apply bezel-arrow;
  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);
  background-size: calc(100% + var(--h)) 100%;

  &::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%
    );
  }
}