button, a[role="button"] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
    border: var(--border-tp);
    height: fit-content;
    width: auto;
    max-width: fit-content;
    text-decoration: none;
    cursor:pointer;
    transition: var(--button-transition);

    /*ADJUST STYLES BELOW IN root.css*/
    padding: var(--button-vertical-padding) var(--button-horizontal-padding);
    font-size: var(--button-font-size);
    font-weight: var(--font-medium-weight);
    letter-spacing: var(--button-letter-spacing);
    line-height: var(--button-line-height);
    border-radius: var(--button-radius);
    background-color: var(--primary-color);
    color: var(--button-text);
    box-shadow: var(--box-shadow);
}

button.outline, a[role="button"].outline {
    border: var(--border-outline);
    background-color: transparent;
    color: var(--outline-button);
}

button:hover, a[role="button"]:hover, button.outline:hover, a[role="button"].outline:hover {
    color: var(--button-text-hover);
    background-color: var(--primary-color-hover);
    box-shadow: var(--box-shadow-hover);
}

button.wide, a[role="button"].wide {
    padding:var(--button-wide-vertical-padding) var(--button-wide-horizontal-padding);
}

button.large, a[role="button"].large {
    padding:var(--button-large-vertical-padding) var(--button-large-horizontal-padding);
    font-size: var(--button-large-font-size);
}

button.small, a[role="button"].small {
    padding:var(--button-small-vertical-padding) var(--button-small-horizontal-padding);
    font-size: var(--button-small-font-size);
}

button.transparent, a[role="button"].transparent {
    background-color: transparent;
    color: var(--primary-color);
}