/* Button */

input, input, input, button, .button {

@include vendor('appearance', 'none');
@include vendor('transition', (
    'background-color #{_duration(transition)} ease-in-out',
    'color #{_duration(transition)} ease-in-out'
));
background-color: transparent;
border-radius: _size(border-radius);
border: 0;
box-shadow: inset 0 0 0 2px _palette(accent);
color: _palette(accent) !important;
cursor: pointer;
display: inline-block;
font-family: _font(family-heading);
font-size: 0.8em;
font-weight: _font(weight-heading);
height: 3.5em;
letter-spacing: _font(kerning-heading);
line-height: 3.5em;
padding: 0 2.25em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
white-space: nowrap;
&:hover {
    background-color: _palette(accent);
    color: _palette(accent-cp) !important;
}
&:active {
    background-color: _palette(accent);
    color: _palette(accent-cp) !important;
}
&.icon {
    &:before {
        margin-right: 0.5em;
    }
}
&.fit {
    width: 100%;
}
&.small {
    font-size: 0.6em;
}
&.large {
    font-size: 1em;
    height: 3.65em;
    line-height: 3.65em;
}
&.primary {
    background-color: _palette(accent);
    box-shadow: none;
    color: _palette(bg) !important;
    &:hover {
        background-color: _palette(accent-cp);
        color: _palette(accent) !important;
    }
    &:active {
        background-color: _palette(accent-cp);
        color: _palette(accent) !important;
    }
}
&.disabled,
&:disabled {
    @include vendor('pointer-events', 'none');
    opacity: 0.25;
}

}