/*
Glowing Card
*/
[data-hide="bc-glowing-card--hide"]{
    opacity: 0;
}
.bc-glowing-card[data-disable-touch-devices] {
    --base: 80; /*base hue*/
    --spread: 500; /*hue spread*/
    --saturation: 100; /*saturation*/
    --lightness: 50; /*lightness*/
    --outer: 0; /*outer glow via checkbox*/
    --size: 500; /*spotlight size*/
    --cardblur: 5; /*backdrop blur*/
    --backdrop: hsl(0 0% 0%);/*hsl(0 0% 60% / 0.12); /*border y backdrop color*/
    --bg-spot-opacity: 0.1; /*backdrop spot alpha*/
    --backup-border: var(--backdrop);
    --get-border-radius: 0; /*border radius*/
    --border-radius: calc(var(--get-border-radius) * 1px);
    --border-width: 3; /*border width*/
    --border-spot-opacity: 1; /*border spot alpha*/
    --border-light-opacity: 1; /*border light alpha*/
    border-radius: var(--border-radius);
}
/* Glow specific styles */
.bc-glowing-card[data-glow] {
    --border-size: calc(var(--border-width, 2) * 1px);
    --spotlight-size: calc(var(--size, 150) * 1px);
    --hue: calc(var(--base) + (var(--xp, 0) * var(--spread, 0)));

    border: var(--border-size) solid var(--backup-border);
    position: relative;
    border-bottom: var(--border-size) solid var(--backup-border);
    margin-bottom: calc(-1 * var(--border-size));
    /* &:last-of-type {
        border-bottom: var(--border-size) solid var(--backup-border);
    } */
}
.bc-glowing-card[data-glow]:hover {
    z-index: 2;
}
.bc-glowing-card[data-glow]::before,
.bc-glowing-card[data-glow]::after {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0px /*calc(var(--border-size) * -1)*/;
    border: var(--border-size) solid transparent;
    border-radius: var(--border-radius);
    background-attachment: fixed;
    background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    mask:
        linear-gradient(transparent, transparent),
        linear-gradient(white, white);
    mask-clip: padding-box, border-box;
    mask-composite: intersect;
    will-change: opacity;
    border-left: 0px;
    border-right: 0px;
    height: calc(100% + (2 * var(--border-size)));
    top: calc(-1 * var(--border-size));
}
/* This is the emphasis light */
.bc-glowing-card[data-glow]:hover::before {
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.75) calc(var(--spotlight-size) * 0.75) at
        calc(var(--x, 0) * 1px)
        50%,
        hsl(var(--hue, 210) calc(var(--saturation, 100) * 1%) calc(var(--lightness, 50) * 1%) / var(--border-spot-opacity, 1)), transparent 100%
    );
    filter: brightness(2);
}
/* This is the spotlight */
.bc-glowing-card[data-glow]:hover::after {
    /* background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 0.5) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(0 100% 100% / var(--border-light-opacity, 1)), transparent 100%
    ); */
    background-image: radial-gradient(
        calc(var(--spotlight-size) * 0.5) calc(var(--spotlight-size) * 5) at
        calc(var(--x, 0) * 1px)
        calc(var(--y, 0) * 1px),
        hsl(0 100% 100% / var(--border-spot-opacity, 1)), transparent 100%
    );
    filter: brightness(2);
}
.bc-glowing-card[data-glow] [data-glow] {
    position: absolute;
    inset: 0;
    will-change: filter;
    opacity: var(--outer, 1);
}
.bc-glowing-card[data-glow] > [data-glow] {
    border-radius: var(--border-radius);
    border-width: calc(var(--border-size) * 20);
    background: none;
    pointer-events: none;
}
.bc-glowing-card[data-glow] > [data-glow]::before {
    inset: -10px;
    border-width: 10px;
}
.bc-glowing-card[data-glow] [data-glow] {
    border: none;
}
.bc-glowing-card[data-glow] :is(a, button) {
    border-radius: var(--border-radius);
    border: var(--border-size) solid transparent;
}
.bc-glowing-card[data-glow] :is(a, button) [data-glow] {
    background: none;
}
.bc-glowing-card[data-glow] :is(a, button) [data-glow]::before {
    inset: calc(var(--border-size) * -1);
    border-width: calc(var(--border-size) * 1);
}

/* Disable at touch devices */
.bc-glowing-card[data-disable]{
    opacity: 1;
}
.bc-glowing-card[data-disable]::before,
.bc-glowing-card[data-disable]::after{
    display: none !important;
}