.input__button { background-image: linear-gradient(0deg, transparent, var(--gradient-start)); background-color: var(--accent-colour); font-family: @mio-font-regular; font-size: 1.1em; line-height: 1.4em; padding: 4px 10px; min-width: 80px; text-align: center; cursor: pointer; transition: background-color .2s, box-shadow .2s; color: var(--text-colour-header); border: 1px solid var(--text-colour-header); border-radius: 2px; display: inline-block; text-decoration: none; &--disabled { background-image: linear-gradient(0deg, #888, #aaa); border-color: #333; color: #333; } &:not(&--disabled) { &:focus { box-shadow: inset 0 0 2px 0 var(--text-colour-header); } &:hover { background-color: #a586c3; } &:active { background-color: var(--gradient-start); } } }