.tag-cloud {
border: solid 1px #cccccc;
padding: 5px;
border-radius: 4px;
display: flex;
flex-wrap: wrap;
background: white;
max-width: 100%;
row-gap: 4px;
column-gap: 4px;
.tag {
cursor: default;
border: solid 1px #cccccc;
padding: 0 5px;
display: flex;
align-items: center;
background: #f2f2f2;
gap: 4px;
width: max-content;
border-radius: 3px;
i.remove-tag {
cursor: pointer;
transform: rotate(45deg);
font-style: normal;
}
}
input.new-tag-input {
border: 0;
background: transparent;
outline: 0;
box-shadow: none;
flex-grow: 1;
padding: 0;
}
}
.tag-suggestions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 6px;
font-size: 0.85em;
color: #888;
.tag-suggestion-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-suggestion {
cursor: pointer;
border: solid 1px #ccc;
padding: 0 6px;
border-radius: 3px;
background: #fff;
color: #555;
transition: background 0.15s, border-color 0.15s;
&:hover {
background: #e8f0fe;
border-color: #4a90d9;
}
&.active {
opacity: 0.4;
pointer-events: none;
}
}
}