.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    inline-size: fit-content;
    background-color: var(--button-color);
    color: var(--button-text-color);
    padding: var(--button-padding);
    margin: var(--button-margin, 0);
    border-radius: var(--button-radius);
    font: inherit;
    cursor: pointer;
    font-weight: normal;
    transition: transform 0.2s, opacity 0.2s, background-color 0.2s, box-shadow 0.2s;
    text-decoration: none;
    border: none;
    box-shadow: inset 0 0 0 var(--button-border-width) var(--button-border-color);
    font-family: 'IBM Plex Mono', monospace;
    white-space: nowrap;
}

/* Occupa tutto lo spazio disponibile nel contenitore padre */
.button.full-width {
    width: 100%;
    inline-size: 100%;
}

.button.bold {
    font-weight: bold;
}

.button:hover {
    opacity: 0.92;
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(0);
}

.button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

/* Remove touch highlight on buttons and hide focus for touch/pointer events
   while keeping keyboard focus-visible for accessibility */
.button,
.button * {
    -webkit-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

.button:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}