2023-03-17 09:24:38 -04:00
|
|
|
@mixin chat-reaction {
|
|
|
|
align-items: center;
|
|
|
|
display: inline-flex;
|
|
|
|
padding: 0.3em 0.6em;
|
|
|
|
margin: 1px 0.25em 1px 0;
|
|
|
|
font-size: var(--font-down-2);
|
|
|
|
border-radius: 4px;
|
2023-04-26 09:11:20 -04:00
|
|
|
border: 1px solid var(--primary-300);
|
2023-03-17 09:24:38 -04:00
|
|
|
background: transparent;
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
|
|
transition: background 0.2s, border-color 0.2s;
|
|
|
|
|
|
|
|
&.reacted {
|
|
|
|
border-color: var(--tertiary-medium);
|
|
|
|
background: var(--tertiary-very-low);
|
|
|
|
color: var(--tertiary-hover);
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
background: var(--tertiary-low);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
&:not(.reacted) {
|
|
|
|
&:hover {
|
|
|
|
background: var(--primary-low);
|
|
|
|
border-color: var(--primary-low-mid);
|
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
|
|
background: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.emoji {
|
|
|
|
height: 15px;
|
|
|
|
margin-right: 4px;
|
|
|
|
width: auto;
|
|
|
|
}
|
|
|
|
}
|