.component-button {
    --bgZIndex: 0;
    --bgZBorder: 1;
    --iconMargin: 10px;
    --iconSize: 1rem;
    --textAlign: center;
    --justifyContent: center;
    --buttonWide: auto;
    background: none;
    border: none;
    color: var(--currentColor);
    font: inherit;
    outline: inherit;
    display: inline-flex;
    position: relative;
    padding: var(--gapY, 0) var(--gapX, 0);
    border-radius: var(--topLeftRadius, 0) var(--topRightRadius, 0) var(--bottomRightRadius, 0) var(--bottomLeftRadius, 0);
    min-width: 15px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    text-align: var(--textAlign);
    justify-content: var(--justifyContent);
    align-items: center;
    vertical-align: middle;
    max-width: 100%;
    word-break: normal;
    hyphens: none;
    width: var(--buttonWide, "auto") !important
}

.component-button:is([data-action-target], [data-action]) {
    cursor: pointer
}

.component-button a[data-action] {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    cursor: pointer
}

.component-button.wide {
    --buttonWide: 100%
}

.component-button.high {
    height: 100% !important
}

.component-button .btn-icon {
    min-height: min(var(--iconSize), 1lh)
}

.component-button .btn-icon,
.component-button .btn-text {
    transition: var(--transitionDuration) var(--transitionTiming);
    transition-property: color, opacity
}

.component-button .btn-text {
    position: relative;
    min-height: 1lh
}

.component-button .btn-text.text-gradient {
    background: var(--currentGradient, var(--currentColor));
    background-clip: text !important;
    -webkit-background-clip: text !important;
    text-decoration-color: var(--currentContrast);
    -webkit-text-decoration-color: var(--currentContrast);
    color: transparent;
    -webkit-text-fill-color: transparent
}

.component-button :is(.btn-icon, .btn-text) {
    z-index: 2
}

.component-button .btn-icon.icon-right {
    order: 2
}

.component-button .btn-icon.icon-right+.btn-text {
    margin-right: var(--iconMargin)
}

.component-button .btn-icon.icon-left+.btn-text {
    margin-left: var(--iconMargin)
}

.component-button .in-cart-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(-50%, -50%, 0) scale(.6)
}

.component-button.animate-add-to-cart {
    pointer-events: none
}

.component-button.animate-add-to-cart .btn-text,
.component-button.animate-add-to-cart .component-icon {
    transition: none;
    opacity: 0;
    will-change: transform
}

.component-button.animate-add-to-cart .in-cart-icon {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    visibility: visible;
    will-change: transform;
    transition: opacity .45s, visibility .45s, transform .3s cubic-bezier(.25, 1, .1, 3)
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .component-button.hover {
    color: var(--currentColorHover, var(--currentColor))
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .component-button.hover .btn-text.text-gradient {
    background: var(--currentColor)
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .component-button.hover .component-icon {
    color: var(--iconColorHover, var(--iconColor, var(--currentColor)))
}

body.adaptive-mobile .component-button {
    width: var(--buttonWide_mobile, var(--buttonWide)) !important;
    text-align: var(--textAlign_mobile, var(--textAlign));
    justify-content: var(--justifyContent_mobile, var(--justifyContent))
}

.component-button.submitting,
.component-button.success {
    pointer-events: none
}

.component-button.submitting .btn-text,
.component-button.submitting .component-icon,
.component-button.success .btn-text,
.component-button.success .component-icon {
    opacity: 0
}

.component-button.submitting .submitting-icon,
.component-button.success .success-icon {
    display: block;
    opacity: 1
}

.component-button .submitting-icon,
.component-button .success-icon {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 50%;
    left: 50%;
    margin: auto;
    transform: translate(-50%, -50%);
    display: none;
    opacity: 0;
    transition: opacity .3s ease
}

.text-underline {
    pointer-events: none;
    position: absolute;
    left: 0;
    right: 0;
    transition: var(--transitionDuration) var(--transitionTiming)
}

.text-underline:not(.is-static) {
    bottom: calc(var(--hoverUnderlineBorder) * -1);
    height: var(--hoverUnderlineBorder);
    background: var(--hoverUnderlineColor)
}

.text-underline:not(.is-static).is-underlined {
    transform: translateY(4px);
    opacity: 0
}

.text-underline:not(.is-static).is-animated {
    left: auto;
    right: 0;
    width: 0
}

.text-underline:not(.is-static).is-change {
    opacity: 0
}

.text-underline.is-static {
    bottom: calc(var(--underlineBorder) * -1);
    height: var(--underlineBorder);
    background: var(--underlineColor)
}

.text-underline.is-static.is-underlined {
    transform: translateY(0);
    opacity: 1
}

.text-underline.is-static.is-animated {
    left: 0;
    right: auto;
    width: 100%
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .hover-underline:hover .text-underline.is-change,
body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .hover-underline:hover .text-underline:not(.is-static) {
    bottom: calc(var(--hoverUnderlineBorder) * -1);
    height: var(--hoverUnderlineBorder);
    background: var(--hoverUnderlineColor)
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .hover-underline:hover .text-underline:not(.is-static).is-underlined {
    transform: translateY(0);
    opacity: 1
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .hover-underline:hover .text-underline:not(.is-static).is-animated {
    left: 0;
    right: auto;
    width: 100%
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .hover-underline:hover .text-underline.is-static.is-underlined {
    transform: translateY(4px);
    opacity: 0
}

body:is(.is-view, .mode--preview, .mode--generation, .state--hide-editor) .hover-underline:hover .text-underline.is-static.is-animated {
    left: auto;
    right: 0;
    width: 0
}