src/atoms/Button/button.css
@value colors: '../../values/colors.css';
@value secondary, secondary-inverted, secondary-light, secondary-dark from colors;
.default {
composes: salient from '../../globals/font.css';
background: none;
font-size: 1.4rem;
line-height: 2rem;
display: inline-block;
padding: 1rem 4rem;
cursor: pointer;
user-select: none;
border: none;
border-radius: 500px;
white-space: nowrap;
text-align: center;
box-sizing: border-box;
transform: none;
}
.main {
composes: default;
color: secondary;
box-shadow: inset 0 0 0 0.2rem secondary;
&:hover {
background: secondary-light;
color: secondary-inverted;
box-shadow: none;
}
&:hover:active {
background: secondary-dark;
color: secondary-inverted;
box-shadow: none;
}
}
.disabled {
composes: disabled from '../../globals/state.css';
}