@property --vkew-shiny-gradient-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --vkew-shiny-gradient-angle-offset {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@property --vkew-shiny-gradient-percent {
    syntax: "<percentage>";
    initial-value: 5%;
    inherits: false;
}

@property --vkew-shiny-gradient-shine {
    syntax: "<color>";
    initial-value: white;
    inherits: false;
}

.vkew-shiny-button {
    --vkew-shiny-bg: #03a9f4;
    --vkew-shiny-bg-subtle: #0292d4;
    --vkew-shiny-fg: #ffffff;
    --vkew-shiny-highlight: #4fc3f7;
    --vkew-shiny-highlight-subtle: #81d4fa;
    --vkew-shiny-animation: vkew-shiny-gradient-angle linear infinite;
    --vkew-shiny-duration: 3s;
    --vkew-shiny-shadow-size: 2px;
    --vkew-shiny-transition: 800ms cubic-bezier(0.25, 1, 0.5, 1);

    isolation: isolate;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    outline-offset: 4px;
    border: 1px solid transparent;
    border-radius: 360px;
    color: var(--vkew-shiny-fg);
    background:
        linear-gradient(var(--vkew-shiny-bg), var(--vkew-shiny-bg)) padding-box,
        conic-gradient(
            from calc(var(--vkew-shiny-gradient-angle) - var(--vkew-shiny-gradient-angle-offset)),
            transparent,
            var(--vkew-shiny-highlight) var(--vkew-shiny-gradient-percent),
            var(--vkew-shiny-gradient-shine) calc(var(--vkew-shiny-gradient-percent) * 2),
            var(--vkew-shiny-highlight) calc(var(--vkew-shiny-gradient-percent) * 3),
            transparent calc(var(--vkew-shiny-gradient-percent) * 4)
        ) border-box;
    box-shadow: inset 0 0 0 1px var(--vkew-shiny-bg-subtle);
    transition: var(--vkew-shiny-transition);
    transition-property: --vkew-shiny-gradient-angle-offset, --vkew-shiny-gradient-percent, --vkew-shiny-gradient-shine;
    text-decoration: none;
}

.vkew-shiny-button::before,
.vkew-shiny-button::after,
.vkew-shiny-button .vkew-shiny-button__content::before {
    content: "";
    pointer-events: none;
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    z-index: -1;
}

.vkew-shiny-button:active {
    translate: 0 1px;
}

.vkew-shiny-button::before {
    --size: calc(100% - var(--vkew-shiny-shadow-size) * 3);
    --position: 2px;
    --space: calc(var(--position) * 2);
    width: var(--size);
    height: var(--size);
    background: radial-gradient(
        circle at var(--position) var(--position),
        white calc(var(--position) / 4),
        transparent 0
    ) padding-box;
    background-size: var(--space) var(--space);
    background-repeat: space;
    mask-image: conic-gradient(
        from calc(var(--vkew-shiny-gradient-angle) + 45deg),
        black,
        transparent 10% 90%,
        black
    );
    -webkit-mask-image: conic-gradient(
        from calc(var(--vkew-shiny-gradient-angle) + 45deg),
        black,
        transparent 10% 90%,
        black
    );
    border-radius: inherit;
    opacity: 0.4;
    z-index: -1;
}

.vkew-shiny-button::after {
    --vkew-shiny-animation: vkew-shiny-shimmer linear infinite;
    width: 100%;
    aspect-ratio: 1;
    background: linear-gradient(
        -50deg,
        transparent,
        var(--vkew-shiny-highlight),
        transparent
    );
    mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black);
    opacity: 0.6;
}

.vkew-shiny-button .vkew-shiny-button__content {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    white-space: nowrap;
}

.vkew-shiny-button .vkew-shiny-button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.vkew-shiny-button .vkew-shiny-button__icon svg,
.vkew-shiny-button .vkew-shiny-button__icon i {
    width: 1.25em;
    height: 1.25em;
    color: currentColor;
    fill: currentColor;
}

.vkew-shiny-button,
.vkew-shiny-button::before,
.vkew-shiny-button::after {
    animation:
        var(--vkew-shiny-animation) var(--vkew-shiny-duration),
        var(--vkew-shiny-animation) calc(var(--vkew-shiny-duration) / 0.4) reverse paused;
    animation-composition: add;
}

.vkew-shiny-button:hover,
.vkew-shiny-button:focus-visible {
    --vkew-shiny-gradient-percent: 20%;
    --vkew-shiny-gradient-angle-offset: 95deg;
    --vkew-shiny-gradient-shine: var(--vkew-shiny-highlight-subtle);
    color: var(--vkew-shiny-fg);
    text-decoration: none;
}

.vkew-shiny-button:hover,
.vkew-shiny-button:hover::before,
.vkew-shiny-button:hover::after,
.vkew-shiny-button:focus-visible,
.vkew-shiny-button:focus-visible::before,
.vkew-shiny-button:focus-visible::after {
    animation-play-state: running;
}

.vkew-shiny-button:hover .vkew-shiny-button__content::before,
.vkew-shiny-button:focus-visible .vkew-shiny-button__content::before {
    opacity: 1;
}

@keyframes vkew-shiny-gradient-angle {
    to {
        --vkew-shiny-gradient-angle: 360deg;
    }
}

@keyframes vkew-shiny-shimmer {
    to {
        rotate: 360deg;
    }
}

@keyframes vkew-shiny-breathe {
    from,
    to {
        scale: 1;
    }
    50% {
        scale: 1.2;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vkew-shiny-button,
    .vkew-shiny-button::before,
    .vkew-shiny-button::after,
    .vkew-shiny-button .vkew-shiny-button__content::before {
        animation: none !important;
        transition: none !important;
    }
}