Files
TechRadarAJR/src/components/Badge/Badge.module.css
2024-03-11 10:40:14 +01:00

51 lines
863 B
CSS

.badge {
position: relative;
display: inline-block;
vertical-align: middle;
padding: 6px 15px;
text-transform: uppercase;
border: 1px solid transparent;
border-radius: 13px;
font-size: 12px;
line-height: 1;
overflow: hidden;
text-decoration: none;
}
.size-small {
padding: 4px 8px;
font-size: 9px;
}
.size-large {
padding: 7px 20px;
font-size: 14px;
border-radius: 15px;
}
.colored {
color: var(--foreground);
background-color: var(--badge);
}
.selectable {
cursor: pointer;
&:not(.selected) {
color: var(--foreground);
border: 1px solid var(--foreground);
background: transparent;
}
&:not(.colored) {
color: var(--foreground);
border: 1px solid var(--foreground);
background: transparent;
&.selected {
color: var(--background);
background: var(--foreground);
}
}
}