:root {
    --button-height: 29px;
    --button-min-width: 134px;
    --button-width: auto;
}

input.button {
    border: 1px solid var(--button-border-color); 
    border-radius: 3px;
    font-size: 12px;
    font-family: verdana, arial, helvetica, sans-serif; 
    text-decoration: none; 
    display: inline-block;
    font-weight: normal; 
    color: var(--button-color);
    background-color: var(--button-background-color);
    
    cursor: pointer;
    height: var(--button-height);
    min-width: var(--button-min-width);
    width: var(--button-width);
    margin: 5px;
    padding: 0px 10px 0px 10px;
}

input.button:hover {
    color: var(--button-color-hover, var(--button-color));
    border-color: var(--button-border-color-hover, var(--button-border-color));
    background-color: var(--button-background-color-hover, var(--button-background-color));
}

input.button:active {
    color: var(--button-color-hover, var(--button-color));
    background-color: var(--button-background-color-active);
}

input.button:disabled {
    cursor: default;
    --button-color: var(--button-color-disabled);
    --button-color-hover: var(--button-color-disabled);
    --button-background-color: var(--button-background-color-disabled);
    --button-background-color-hover: var(--button-background-color-disabled);
    --button-background-color-active: var(--button-background-color-disabled);
    --button-border-color: var(--button-border-color-disabled);
    --button-border-color-hover: var(--button-border-color-disabled, var(--button-border-color));
}

input.primary {
    --button-color: #ffffff; 
    --button-border-color: none;
    --button-background-color: var(--red-60);
    --button-background-color-hover: var(--red-40);
    --button-background-color-active: var(--red-30);
    --button-color-disabled: var(--gray-60);
    --button-border-color-disabled: none;
    --button-background-color-disabled: var(--gray-80);
}
input.secondary {
    --button-color: #ffffff;
    --button-border-color: none;
    --button-background-color: var(--blue-60);
    --button-background-color-hover: var(--blue-40);
    --button-background-color-active: var(--blue-30);
    --button-color-disabled: var(--gray-60);
    --button-border-color-disabled: none;
    --button-background-color-disabled: var(--gray-80);
}

input.outline {
    --button-color: var(--link-text-color); 
    --button-border-color: var(--red-40);
    --button-color-hover: #ffffff;
    --button-background-color: transparent;
    --button-background-color-hover: var(--red-40);
    --button-border-color-hover: var(--red-40);
    --button-background-color-active: var(--red-30);
    --button-color-disabled: var(--gray-60);
    --button-border-color-disabled: var(--gray-80);
    --button-background-color-disabled: none;
}

.shortButton {
	--button-width: 60px;
	--button-min-width: 60px;
}