$_button-background-color: $action-color; $_button-background-color-hover: $hover-color;
.button {
appearance: none; background-color: $_button-background-color; border: 0; border-radius: $base-border-radius; color: white; cursor: pointer; display: inline-block; font-family: $base-font-family; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; -webkit-font-smoothing: antialiased; font-weight: 600; line-height: 1; padding: $small-spacing $base-spacing; text-align: center; text-decoration: none; transition: background-color $base-duration $base-timing; user-select: none; vertical-align: middle; white-space: nowrap; &:hover { background-color: $_button-background-color-hover; color: white; } &:focus { outline: $focus-outline; outline-offset: $focus-outline-offset; } &:disabled { cursor: not-allowed; opacity: 0.5; &:hover { background-color: $_button-background-color; } }
}