box-shadow: none;
background-color: var(--color-primary);
color: #FFF;
- fill: #FFF;
text-transform: uppercase;
border: 1px solid var(--color-primary);
vertical-align: top;
+ @include lightDark(filter, none, saturate(0.8) brightness(0.8));
&:hover, &:focus, &:active {
background-color: var(--color-primary);
text-decoration: none;
color: #FFFFFF;
}
&:hover {
- box-shadow: $bs-light;
+ @include lightDark(box-shadow, $bs-light, $bs-dark);
filter: brightness(110%);
}
&:focus {
.button.outline {
background-color: transparent;
- color: #666;
+ @include lightDark(color, #666, #aaa);
fill: currentColor;
border: 1px solid #CCC;
&:hover, &:focus, &:active {
border: 1px solid #CCC;
box-shadow: none;
background-color: #F2F2F2;
+ @include lightDark(background-color, #f2f2f2, #555);
filter: none;
}
&:active {
font-size: 0.75rem;
line-height: 1.4em;
color: var(--color-primary);
- fill: var(--color-primary);
+ @include whenDark {
+ color: #AAA;
+ }
&:active {
outline: 0;
}
align-items: center;
padding: $-s $-m;
padding-bottom: ($-s - 2px);
+ width: 100%;
svg {
display: inline-block;
width: 24px;