.reb-button-wrap {
    display: flex;
    width: 100%;
}

.reb-rolling-button {
    --reb-button-height: 100px;
    --reb-ball-size: 73px;
    --reb-edge-gap: 11px;
    --reb-roll-rotation: 720deg;
    --reb-duration: 0.75s;

    position: relative;
    display: block;
    width: 432px;
    max-width: 100%;
    height: var(--reb-button-height);
    padding: 0;
    overflow: hidden;
    box-sizing: border-box;

    border-style: solid;
    border-width: 1px;
    border-color: #000;
    border-radius: 999px;
    background: #fff;

    color: #000;
    text-decoration: none;
    cursor: pointer;

    transition:
        color 0.25s ease,
        background-color 0.25s ease,
        border-color 0.25s ease;
}

.reb-rolling-button:hover,
.reb-rolling-button:focus,
.reb-rolling-button:visited {
    text-decoration: none;
}

.reb-button-label {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;

    max-width: calc(100% - var(--reb-ball-size) - 88px);
    transform: translate(-50%, -50%);

    color: inherit;
    white-space: nowrap;
    text-align: center;
}

.reb-rolling-mark {
    position: absolute;
    top: 50%;
    left: var(--reb-edge-gap);
    z-index: 3;

    display: block;
    width: var(--reb-ball-size);
    height: var(--reb-ball-size);

    color: #000;

    transform: translateY(-50%) rotate(0deg);
    transform-origin: 50% 50%;

    transition:
        left var(--reb-duration) cubic-bezier(.65, 0, .35, 1),
        transform var(--reb-duration) cubic-bezier(.65, 0, .35, 1),
        color 0.25s ease;

    will-change: left, transform;
}

.reb-rolling-mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.reb-arrow {
    position: absolute;
    top: 50%;
    z-index: 2;

    display: block;
    width: 28px;
    height: 10px;

    transform: translateY(-50%);

    transition:
        opacity 0.3s ease,
        transform 0.45s cubic-bezier(.22, 1, .36, 1);
}

.reb-arrow svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;

    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.reb-arrow-right {
    right: 25px;
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}


.reb-rolling-button:hover .reb-rolling-mark,
.reb-rolling-button:focus-visible .reb-rolling-mark {
    left: calc(100% - var(--reb-ball-size) - var(--reb-edge-gap));
    transform: translateY(-50%) rotate(var(--reb-roll-rotation));
}

.reb-rolling-button:hover .reb-arrow-right,
.reb-rolling-button:focus-visible .reb-arrow-right {
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
}


.reb-rolling-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

@media (max-width: 767px) {
    .reb-rolling-button {
        --reb-button-height: 84px;
        --reb-ball-size: 64px;
        --reb-edge-gap: 9px;
        width: 100%;
    }

    .reb-button-label {
        max-width: calc(100% - 150px);
        white-space: normal;
    }

    .reb-arrow-right {
        right: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .reb-rolling-mark,
    .reb-arrow,
    .reb-rolling-button {
        transition-duration: 0.01ms !important;
    }
}