/*
*CRYSTAL BUTTON*
*/
.bc-crystal-button {
    display: block;
    width: fit-content;
    box-sizing: border-box;

    white-space: wrap;

    --radius: 15px; /*border-radius*/
    --filter: 0.7;
    --border: 1px;
    --padding: 1px;
    border-radius: var(--radius);
    border: 1px solid #d1d1d1;
    position: relative;
    place-items: center;
    padding: 1px;
    transition: transform 0.1s;

    padding: 12px 36px; /**/
}
.bc-crystal-button:is(:hover, :focus-visible) {
    --hover: 1;
}
.bc-crystal-button:before{
    content: "";
    position: absolute;
    inset: 0px;
    border-radius: calc(var(--radius) - var(--border));
    background:
        conic-gradient(
        from calc(var(--rx, 0) * 180deg) at
            calc(var(--x, 0) * 100%) calc(var(--y, 0) * 100%),
        hsl(10 90% 70%),
        hsl(140 80% 70%),
        hsl(320 80% 70%),
        hsl(210 80% 70%),
        hsl(10 80% 70%)
        );
    filter: saturate(var(--filter)); /**/
    opacity: var(--hover, 0);
    transition: opacity 0.2s;
}
.bc-crystal-button__backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius) - var(--padding));
    display: block;
    grid-column: 1;
    grid-row: 1;
}
.bc-crystal-button__title {
    grid-row: 1;
    grid-column: 1;
    position: relative;
    z-index: 2;
    display: grid;
    align-items: center;
    gap: 0.5rem;
}
.bc-crystal-button--dark {
    outline: none;
}
.bc-crystal-button__backdrop {
    --blur: 20px;
    --brightness: 1.2;
    --saturate: 1;
    background: hsla(0,0,0, 0.3); /*crystal color*/
    -webkit-backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); /**/
    backdrop-filter: blur(var(--blur)) brightness(var(--brightness)) saturate(var(--saturate)); /**/
}
.bc-crystal-button--dark:after {
    background: hsl(0 0% 10% / calc(1 - var(--hover, 0) * 0.25));
}