.button {
display: inline-block;
text-align: center;
font: inherit;
line-height: inherit;
background: none;
cursor: pointer;
padding: 0.3em 0.5em 0.2em;
border: 1px solid $color--brand-primary;
border-radius: -cdd-em(4);
& + & {
margin-top: 0.5em;
}
transition: color 0.2s ease, border-color 0.2s ease;
&, &:link, &:visited {
color: $color--brand-primary;
}
&:hover, &:focus, &:not(&--novisited):visited {
border-color: $color--brand-primary-alternate;
color: $color--brand-primary-alternate;
}
&--secondary {
&, &:link, &:visited {
border-color: $color--brand-secondary;
color: $color--brand-secondary;
}
&:hover, &:focus, &:not(.button--novisited):visited {
border-color: $color--brand-secondary-alternate;
color: $color--brand-secondary-alternate;
}
}
&:disabled, &--disabled {
border-color: $color--passive-dark;
color: $color--passive-dark;
}
}