/**
 * Theme Button Styles
 * 
 * This file contains all custom styles related to buttons using the UAGB 
 * button component, especially the `.standard` style variations.
 * 
 * If additional button styles or variations become too large, create a 
 * separate sub-file and name it accordingly (e.g., theme_buttons-outline.css).
 */

.uagb-buttons__wrap {
    margin-top: calc(var(--gap-l) - var(--gap-m));
}

/* 1) Variablen als animierbar registrieren */
@property --stop1 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0.39%;
}

@property --stop2 {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 99.5%;
}

/* 2) Button-Styles */

.uagb-buttons-repeater.wp-block-button__link {
    --stop1: 0.39%;
    --stop2: 99.5%;
    
    background: linear-gradient(89deg,
    var(--ast-global-color-0) var(--stop1),
    var(--ast-global-color-2) var(--stop2));
    
    font-size: var(--base-font-size);
    font-family: var(--mainfont);
    letter-spacing: 0.01em;
    padding: 0.75em 1.8em !important;
    color: #fff !important;
    
    transition: --stop1 0.8s ease, --stop2 0.8s ease;
    --gradient: linear-gradient(89deg, var(--ast-global-color-0) 0.39%, var(--ast-global-color-2) 99.5%);
}

/* 3) Hover-Zustand: beide Stops ans Ende -> voll color-0 */
.uagb-buttons-repeater.wp-block-button__link:hover {
    --stop1: 100%;
    --stop2: 100%;
}

/* Optional: Bewegungen für Nutzer reduzieren */
@media (prefers-reduced-motion: reduce) {
    .uagb-buttons-repeater.wp-block-button__link {
        transition: none;
    }
}

.wp-block-uagb-buttons.btn-group {
    background: var(--gradient);
    display: flex;
    width: fit-content !important;
    font-size: var(--btn-font-size);
    padding: 1.35em var(--gap-xl);
    border-radius: 13em;
}

.wp-block-uagb-buttons.btn-group .uagb-buttons__wrap.uagb-buttons-layout-wrap {
    margin: 0 !important;
    gap: calc(var(--gap-m) + var(--gap-l));
}

.wp-block-uagb-buttons.btn-group .uagb-buttons-repeater.wp-block-button__link {
    background: unset !important;
    padding: 0 !important;
}

.wp-block-button.btn-preis .uagb-buttons-repeater.wp-block-button__link,
.wp-block-button.btn-anfrage .uagb-buttons-repeater.wp-block-button__link,
.wp-block-button.btn-buchen .uagb-buttons-repeater.wp-block-button__link {
    gap: var(--gap-s);
}

.wp-block-button.btn-preis .uagb-buttons-repeater.wp-block-button__link::before,
.wp-block-button.btn-anfrage .uagb-buttons-repeater.wp-block-button__link::before,
.wp-block-button.btn-buchen .uagb-buttons-repeater.wp-block-button__link::before {
    content: '';
    display: block;
    height: 1em;
    width: 1em;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
}

.wp-block-button.btn-preis .uagb-buttons-repeater.wp-block-button__link::before {
    background-image: url(../../img/icon-preis.svg);
}

.wp-block-button.btn-anfrage .uagb-buttons-repeater.wp-block-button__link::before {
    background-image: url(../../img/icon-anfrage.svg);

}

.wp-block-button.btn-buchen .uagb-buttons-repeater.wp-block-button__link::before {
    background-image: url(../../img/icon-buchen.svg);

}

@media (max-width: 990px) {
    .wp-block-uagb-buttons.btn-group {
        background: transparent;
        display: flex;
        font-size: var(--btn-font-size);
        padding: 0;
        border-radius: 0;
        width: 100% !important;
        max-width: 90vw;
    }

    .wp-block-uagb-buttons.btn-group .uagb-buttons__wrap.uagb-buttons-layout-wrap {
        flex-direction: column;
        gap: var(--gap-s);
    }

    .wp-block-uagb-buttons.btn-group .wp-block-uagb-buttons-child.wp-block-button {
        width: 100%;
    }

    .wp-block-uagb-buttons.btn-group a.uagb-buttons-repeater.wp-block-button__link {
        background: var(--gradient) !important;
        font-size: var(--base-font-size);
        font-family: var(--mainfont);
        letter-spacing: 0.01em;
        padding: 0.75em 1.8em !important;
        color: #fff !important;
    }
}