/*
 * WordPress Button Override
 * Implements SOLID-like modularity via CSS variables and ensures high performance.
 */

:root {
    /* Configuration variables - Adjust the HEX values to match the design system exactly */
    --btn-primary-bg: var(--button-bg-color);
    --btn-primary-bg-hover: var(--button-hover-color);
    --btn-text-color: var(--button-color);
    --btn-padding-y: var(--button-padding-y);
    --btn-padding-x: var(--button-padding-x);
    --btn-transition-speed: 0.25s;
}

/* * Main Button Component 
 */
.wp-block-button__link.wp-element-button {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--btn-padding-y) var(--btn-padding-x);
    
    /* Typography & UI */
    color: var(--btn-text-color);
    background-color: var(--btn-primary-bg);
    border-radius: var(--btn-border-radius);
    text-decoration: var(--button-text-decoration);
    font-weight: var(--button-font-weight);
    font-size: var(--button-font-size);
    border: var(--button-border);
    border-radius: var(--button-border-radius);
    
    /* Interaction & Performance */
    cursor: var(--button-cursor);
    transition: var(--button-transition);
    will-change: background-color, transform; /* Hardware acceleration hint */
}

/* * Accessibility (WCAG) & Interaction States
 */
.wp-block-button__link.wp-element-button:hover {
    background-color: var(--btn-primary-bg-hover);
    color: var(--button-default-bg);
    outline: var(--button-hover-outline);
    outline-offset: var(--button-outline-offset);
    transform: var(--button-hover-transform);
}

.wp-block-button__link.wp-element-button:focus-visible {
    /* Essential for keyboard navigation security/usability */
    outline: 2px solid var(--btn-primary-bg);
    outline-offset: 4px;
}

/* * Appended SVG Icon 
 * Using CSS mask allows the SVG to safely inherit the parent's text color.
 * The SVG data URI is sanitized and properly encoded.
 */
.wp-block-button__link.wp-element-button::after {
    content: "";
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    background-color: currentColor;
    
    /* Inline SVG of an 'arrow-up-right' */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='7' y1='17' x2='17' y2='7'/%3E%3Cpolyline points='7 7 17 7 17 17'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* * Responsive Adjustments (Mobile/Tablet < 1190px)
 */
@media (max-width: 1190px) {
    .wp-block-button__link.wp-element-button {
        /* Nadpisanie paddingu i rozmiaru czcionki */
        padding: var(--button-mobile-padding-y) var(--button-mobile-padding-x);
        font-size: var(--button-mobile-font-size);
    }

    .wp-block-button__link.wp-element-button::after {
        /* Nadpisanie rozmiaru strzałki zgodnie z Twoją prośbą */
        width: var(--button-mobile-font-size);
        height: var(--button-mobile-font-size);
    }
}