/* Buttons & Input Submit Styles */
button,
input[type="submit"],
a.btn {
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: fit-content;
    border: none;
    overflow: hidden;
    outline: none !important;
    gap:var(--spacing-12);
    background-color: var(--primary);
    font: var(--font-btn);
    color: var(--white-100);
    padding: var(--spacing-16) var(--spacing-40);
    border-radius: var(--radius-16);
    will-change: transform, background-color;
    transition: var(--transition-fast);
}
button:not(.owl-prev, .owl-next):hover,
input[type="submit"]:hover,
a.btn:hover {
    background-color: var(--primary-hover);
    transform: translateY(calc(-3 * var(--rpx)));
}
button:not(.owl-prev, .owl-next) > span,
input[type="submit"] > span,
a.btn > span,
button:not(.owl-prev, .owl-next) > :last-child:not(:first-child),
input[type="submit"] > :last-child:not(:first-child),
a.btn > :last-child:not(:first-child),
button:not(.owl-prev, .owl-next) > :last-child:not(:first-child) *,
input[type="submit"] > :last-child:not(:first-child) *,
a.btn > :last-child:not(:first-child) * {
    will-change: auto;
    transition: var(--transition-fast);
}
button:not(.owl-prev, .owl-next):hover > :last-child:not(:first-child),
input[type="submit"]:hover > :last-child:not(:first-child),
a.btn:hover > :last-child:not(:first-child) {
    transform: translateX(calc(6 * var(--rpx)))rotate(45deg);
}

/* Presets */
/* Text */
button.text,
a.btn.text,
input[type="submit"].text {
    padding: 0;
    background-color: transparent;
    color: var(--text);
    text-decoration: underline;
    border-radius: 0;
}
button.text:hover,
a.btn.text:hover,
input[type="submit"].text:hover{
    color: var(--primary);
    transform: translateY(0);
    background-color: transparent;
}

/* Secondary */
button.secondary,
a.btn.secondary,
input[type="submit"].secondary {
    background-color: var(--secondary);
    color: var(--white-100);
}
button.secondary:hover,
a.btn.secondary:hover,
input[type="submit"].secondary:hover{
    background-color: var(--secondary-hover);
}

/* Transparent */
button.transparent,
a.btn.transparent,
input[type="submit"].transparent {
    padding: 0;
    background-color: transparent;
    color: var(--text);
    border-radius: 0;
}
button.transparent:hover,
a.btn.transparent:hover,
input[type="submit"].transparent:hover{
    background-color: transparent;
    transform: translateY(0);
    padding-right: calc(6 * var(--rpx));
}
button.transparent:hover span,
a.btn.transparent:hover span,
input[type="submit"].transparent:hover span{
    color: var(--primary);
}
button.transparent:hover svg path,
a.btn.transparent:hover svg path,
input[type="submit"].transparent:hover svg path{
    fill: var(--primary);
}

/* OutlinePrimary */
button.outline.primary,
a.btn.outline.primary,
input[type="submit"].outline.primary {
    background-color: transparent;
    color: var(--secondary);
    border: calc(var(--rpx) * 1) solid var(--primary);
}
button.outline.primary:hover,
a.btn.outline.primary:hover,
input[type="submit"].outline.primary:hover{
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    color: var(--white-100);
}
button.outline.primary:hover svg,
a.btn.outline.primary:hover svg,
input[type="submit"].outline.primary:hover svg{
    transform: rotate(45deg);
}
button.outline.primary:hover path,
a.btn.outline.primary:hover path,
input[type="submit"].outline.primary:hover path{
    fill: var(--white-100);
}




@media (max-width: 768px) {
    button,
    input[type="submit"],
    a.btn {width: 100%;border-radius: var(--radius-16);padding-top: var(--spacing-12);padding-bottom: var(--spacing-12);}
}