:root {
    --arkb-btn-color--default: var(--ark-color--main, #000)
}
.ark-block-buttons {
    --arkb-gap--x: 1rem;
    --arkb-gap--y: 1rem;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center
}
.ark-block-buttons[data-orientation=horizontal] {
    column-gap: 0;
    margin-left: calc(0px - var(--arkb-gap--x));
    row-gap: var(--arkb-gap--y)
}
.ark-block-buttons[data-orientation=horizontal] .ark-block-button {
    margin-left: var(--arkb-gap--x);
    margin-right: 0
}
.ark-block-buttons[data-orientation=horizontal] .ark-block-button[data-has-width] {
    width: calc(var(--arkb-btn-width) - var(--arkb-gap--x))
}
.ark-block-buttons[data-orientation=vertical] {
    flex-direction: column;
    gap: var(--arkb-gap--y) var(--arkb-gap--x)
}
.ark-block-buttons[data-orientation=vertical] .ark-block-button {
    margin-left: 0;
    margin-right: 0
}
.ark-block-buttons[data-orientation=vertical] .ark-block-button[data-has-width] {
    width: var(--arkb-btn-width)
}
.ark-block-button {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    position: relative
}
.ark-block-button[data-has-width] {
    max-width: 100%
}
.ark-block-button[data-has-width] .ark-block-button__link {
    width: 100%
}
.ark-block-button img {
    display: none
}
.ark-block-button .ark-block-button__link[data-has-icon], .ark-block-button__link {
    align-items: center;
    display: inline-flex;
    justify-content: center
}
.ark-block-button__link {
    border-radius: var(--arkb-btn-radius, 0);
    gap: .2em;
    line-height: 1.5;
    margin: 0;
    max-width: 100%;
    min-width: var(--arkb-btn-width, 3em);
    padding: .75em 1.75em;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: color .25s, background-color .25s
}
.ark-block-button__link .ark-block-button__text {
    min-width: 1em;
    z-index: 0
}
.ark-block-button__link:before {
    border-radius: inherit;
    content: "";
    inset: 0;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transition: opacity .25s, visibility .25s;
    visibility: hidden;
    z-index: 1
}
.ark-block-button__link:hover:before {
    opacity: 1;
    visibility: visible
}
.ark-block-button__icon {
    flex-shrink: 0;
    z-index: 2
}
.ark-block-button__icon.-left {
    transform: scale(1.25) translateX(-.25em)
}
.ark-block-button__icon.-right {
    transform: scale(1.25) translateX(.25em)
}
.ark-block-button[data-hover=bright] .ark-block-button__link:before {
    background: #fff3
}
.ark-block-button[data-hover=dark] .ark-block-button__link:before {
    background: #0000001a
}
.ark-block-button[data-hover=float] .ark-block-button__link:before {
    box-shadow: 0 8px 24px -4px #0000001a, 0 16px 32px -16px #0003
}
.is-btn-fill {
    --the-btn-color: var(--arkb-btn-color--bg, var(--arkb-btn-color--default))
}
.is-btn-fill .ark-block-button__link {
    background: var(--the-btn-color);
    color: var(--arkb-btn-color--text, #fff)
}
.is-btn-fill[data-hover=swap] .ark-block-button__link:hover {
    background: var(--arkb-btn-color--text, none);
    box-shadow: inset 0 0 0 1px var(--the-btn-color);
    color: var(--the-btn-color)
}
.is-btn-outline {
    --the-btn-color: var(--arkb-btn-color--text, var(--arkb-btn-color--default))
}
.is-btn-outline .ark-block-button__link {
    background: var(--arkb-btn-color--bg, none);
    box-shadow: inset 0 0 0 1px var(--the-btn-color);
    color: var(--the-btn-color);
    position: relative
}
.is-btn-outline[data-hover=swap] .ark-block-button__link:hover {
    background: var(--the-btn-color);
    color: var(--arkb-btn-color--bg, #fff)
}
.is-btn-text {
    --the-btn-color: var(--arkb-btn-color--text, var(--arkb-btn-color--default));
    --arkb-btn-radius: 0px
}
.is-btn-text .ark-block-button__link {
    color: var(--the-btn-color);
    gap: .25em;
    padding: .5em;
    position: relative
}
.is-btn-text .ark-block-button__link:before {
    content: none
}
.is-btn-text .ark-block-button__icon {
    border: 1px solid var(--the-btn-color);
    border-radius: 50%;
    font-size: 1.5em;
    overflow: visible;
    padding: .2em;
    transition: all .25s
}
.is-btn-text .ark-block-button__link:hover {
    text-decoration: underline
}
.is-btn-text .ark-block-button__link:hover .ark-block-button__icon {
    background-color: var(--the-btn-color);
    color: #fff
}