.tag-cloud {
border: 1px solid #cbd5e1;
padding: 8px;
border-radius: 10px;
display: flex;
flex-wrap: wrap;
background: #ffffff;
max-width: 100%;
row-gap: 6px;
column-gap: 6px;
align-items: center;
transition: border-color 160ms ease, box-shadow 160ms ease;
&:focus-within {
border-color: #2563eb;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22);
}
.tag {
cursor: default;
border: 1px solid #c7d2fe;
padding: 3px 10px;
display: inline-flex;
align-items: center;
background: #eff6ff;
color: #1e40af;
gap: 6px;
width: max-content;
border-radius: 999px;
font-size: 0.8125rem;
font-weight: 500;
line-height: 1.4;
transition: background-color 140ms ease, border-color 140ms ease;
&:hover {
background: #dbeafe;
border-color: #93c5fd;
}
i.remove-tag {
cursor: pointer;
transform: rotate(45deg);
font-style: normal;
color: #1d4ed8;
font-size: 1rem;
line-height: 1;
transition: color 140ms ease, transform 140ms ease;
&:hover {
color: #dc2626;
transform: rotate(45deg) scale(1.15);
}
}
}
input.new-tag-input {
border: 0;
background: transparent;
outline: 0;
box-shadow: none;
flex-grow: 1;
padding: 4px 6px;
color: #0f172a;
font-size: 0.875rem;
min-width: 120px;
&::placeholder { color: #94a3b8; }
}
}
.tag-suggestions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 8px;
font-size: 0.8125rem;
.tag-suggestion-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.tag-suggestion {
cursor: pointer;
border: 1px solid #e2e8f0;
padding: 3px 10px;
border-radius: 999px;
background: #ffffff;
color: #475569;
font-size: 0.8125rem;
transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
&:hover {
background: #eff6ff;
border-color: #93c5fd;
color: #1d4ed8;
}
&.active {
opacity: 0.4;
pointer-events: none;
}
}
}