/* WordPress Button Best Practices - Higher Specificity for Default Styles */

/* Base styles for custom button variations */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link,
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--blau, #165084);
    border: 1px solid var(--wp--preset--color--blau, #165084);
    border-radius: 5px;
    padding: 10px;
    padding-right: 8px;
    position: relative;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* width: 100%; */
}

/* Button text styling - ohne background-color, da wir jetzt clip-path verwenden */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link .button-text,
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link .button-text {
    flex-shrink: 0;
    padding-right: 10px;
    z-index: 10;
    transition: all 0.3s ease;
}


/* Arrow Container - feste Maske für Pfeil-Effekt */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link .arrow-container,
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link .arrow-container {
    width: 32px;
    height: 11px;
    position: relative;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.3s ease;
    flex-shrink: 0;
}

/* Hover: Erweitert die sichtbare Zone des Containers */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link:hover .arrow-container,
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link:hover .arrow-container {
    clip-path: inset(0 0 0 0);
}

/* SVG Arrow styling - bewegt sich innerhalb des Containers */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link svg.grehn-button-arrow,
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link svg.grehn-button-arrow {
    width: 32px;
    height: 11px;
    position: absolute;
    transform: translateX(-24px);
    transition: transform 0.3s ease;
}

/* Hover states for arrows - bewegt sich in die sichtbare Zone */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link:hover svg.grehn-button-arrow,
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link:hover svg.grehn-button-arrow {
    transform: translateX(-18px);
}



/* Primary Button specific styles */
body .wp-block-button.is-style-grehn-primary .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--blau, #165084);
}

body .wp-block-button.is-style-grehn-primary .wp-block-button__link:hover {
    background-color: #F4DF98;
    border-color: var(--wp--preset--color--blau, #165084);
    color: var(--wp--preset--color--blau, #165084);
    cursor: pointer;
}

/* Secondary Button specific styles */
body .wp-block-button.is-style-grehn-secondary .wp-block-button__link {
    background-color: transparent;
    color: var(--wp--preset--color--beige, #EFECDF);
    border-color: var(--wp--preset--color--beige, #EFECDF);
}

body .wp-block-button.is-style-grehn-secondary .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--gold, #F4DF98);
    border-color: var(--wp--preset--color--blau, #165084);
    color: var(--wp--preset--color--blau, #165084);
    cursor: pointer;
}

body .wp-block-button.is-style-grehn-secondary .wp-block-button__link:hover svg.grehn-button-arrow path {
    fill: var(--wp--preset--color--blau, #165084) !important;
}

body .wp-block-button.is-style-grehn-secondary .wp-block-button__link:hover svg.grehn-button-arrow line {
    stroke: var(--wp--preset--color--blau, #165084) !important;
}