:root {
    /* Define a variable for the button size */
    --button-size: 48px;
    /* Define a variable for the icon size (e.g., 60% of the button size) */
    --icon-size: calc(var(--button-size) * 0.5); 
    --primary-color: rgba(0,0,0, 0.5); /*#007bff; /* Blue color */
    --text-color: #ffffff; /* White icon color */
}

.round-icon-button-large {
    width: 48px;
    height: 48px;  
}
.round-icon-button-small {
    width: 32px;
    height: 32px;  
}
.round-icon-button {
    /* 1. Sizing and Shape */

    border-radius: 50%; /* Makes it perfectly round */
    padding: 0; /* Remove default padding */

    /* 2. Style */
    background-color: var(--primary-color);
    color: var(--text-color); /* This sets the stroke color of the SVG via 'currentColor' */
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.2s, box-shadow 0.1s, transform 0.1s;

    /* 3. Centering the SVG Icon */
    display: flex;
    justify-content: center; /* Horizontal center */
    align-items: center; /* Vertical center */
}

/* Style for the SVG inside the button */
.round-icon-button svg {
    /* Set the size of the SVG based on the variable */
    width: var(--icon-size);
    height: var(--icon-size);
    /* Ensure the stroke is the color of the button's 'color' property */
    stroke: currentColor; 
}

/* Optional: Hover and Active States for better UX */
.round-icon-button:hover {
    background-color: rgba(255,255,255,0.5); /* Darker blue on hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
}

.round-icon-button:active {
    background-color: #000000; /* Even darker blue when pressed */
    transform: scale(0.98); /* Slight press effect */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.red-button {
    background-color: darkred;
}

.green-button {
    background-color: darkgreen;
}