.post-tag-inline-wrapper{
display:flex;
align-items:center;
gap:10px;
margin-bottom:14px;
}
.post-tag-inline-label{
color:rgba(255,255,255,0.5);
font-size:0.75rem;
font-weight:500;
letter-spacing:0.02em;
}
.post-tag-dropdown-wrapper{
position:relative;
}
.post-tag-dropdown-btn{
display:flex;
align-items:center;
gap:7px;
padding:7px 13px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
cursor:pointer;
transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
position:relative;
overflow:hidden;
}
.post-tag-dropdown-btn::before{
content:'';
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);
transition:left 0.5s;
}
.post-tag-dropdown-btn:hover::before{
left:100%;
}
.post-tag-dropdown-btn:hover{
background:rgba(255,255,255,0.1);
border-color:rgba(255,255,255,0.2);
transform:translateY(-1px);
box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.post-tag-dropdown-btn.active{
background:rgba(74,158,255,0.15);
border-color:rgba(74,158,255,0.3);
}
.tag-dropdown-icon{
font-size:1rem;
line-height:1;
transition:transform 0.2s ease;
}
.post-tag-dropdown-btn:hover .tag-dropdown-icon{
transform:scale(1.1);
}
.tag-dropdown-label{
color:rgba(255,255,255,0.9);
font-size:0.875rem;
font-weight:500;
white-space:nowrap;
}
.tag-dropdown-arrow{
width:13px;
height:13px;
color:rgba(255,255,255,0.6);
transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.post-tag-dropdown-btn:hover .tag-dropdown-arrow{
color:rgba(255,255,255,0.9);
}
.post-tag-dropdown-btn.active .tag-dropdown-arrow{
transform:rotate(180deg);
color:rgba(74,158,255,0.9);
}
.post-tag-dropdown-menu{
position:absolute;
top:calc(100% + 6px);
left:0;
min-width:160px;
background:rgba(30,36,51,0.98);
backdrop-filter:blur(24px);
border:1px solid rgba(255,255,255,0.15);
border-radius:10px;
padding:6px;
max-height:0;
overflow:hidden;
opacity:0;
transform:translateY(-10px) scale(0.95);
transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
z-index:1000;
box-shadow:0 10px 40px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.05);
}
.post-tag-dropdown-menu.show{
max-height:320px;
opacity:1;
transform:translateY(0) scale(1);
overflow-y:auto;
}
.post-tag-dropdown-menu::-webkit-scrollbar{
width:6px;
}
.post-tag-dropdown-menu::-webkit-scrollbar-track{
background:rgba(255,255,255,0.05);
border-radius:3px;
}
.post-tag-dropdown-menu::-webkit-scrollbar-thumb{
background:rgba(255,255,255,0.2);
border-radius:3px;
}
.post-tag-dropdown-menu::-webkit-scrollbar-thumb:hover{
background:rgba(255,255,255,0.3);
}
.post-tag-option{
display:flex;
align-items:center;
gap:10px;
padding:9px 12px;
background:transparent;
cursor:pointer;
transition:all 0.15s cubic-bezier(0.4,0,0.2,1);
font-size:0.875rem;
color:rgba(255,255,255,0.9);
border-radius:6px;
margin-bottom:2px;
position:relative;
}
.post-tag-option:last-child{
margin-bottom:0;
}
.post-tag-option:hover{
background:rgba(255,255,255,0.12);
transform:translateX(2px);
}
.post-tag-option.active{
background:rgba(74,158,255,0.15);
}
.post-tag-option.active::after{
content:'';
width:5px;
height:5px;
background:#60a5fa;
border-radius:50%;
margin-left:auto;
box-shadow:0 0 8px rgba(96,165,250,0.6);
}
.post-tag-emoji{
font-size:1rem;
line-height:1;
transition:transform 0.15s ease;
}
.post-tag-option:hover .post-tag-emoji{
transform:scale(1.15);
}
.post-tag-label{
font-weight:500;
flex:1;
}
.post-tag-display{
display:inline-flex;
align-items:center;
gap:5px;
padding:4px 10px;
background:rgba(255,255,255,0.04);
border-left:3px solid rgba(74,158,255,0.5);
border-radius:4px;
font-size:0.7rem;
color:rgba(255,255,255,0.6);
font-weight:500;
letter-spacing:0.02em;
text-transform:uppercase;
cursor:default;
}
.post-tag-display .post-tag-emoji{
font-size:0.85rem;
line-height:1;
opacity:0.8;
}
.post-tag-display .post-tag-label{
opacity:0.85;
}
@media(max-width:640px){
.post-tag-inline-wrapper{
gap:8px;
margin-bottom:12px;
}
.post-tag-inline-label{
font-size:0.7rem;
}
.post-tag-dropdown-btn{
padding:6px 11px;
gap:6px;
}
.tag-dropdown-icon{
font-size:0.9rem;
}
.tag-dropdown-label{
font-size:0.8rem;
}
.tag-dropdown-arrow{
width:11px;
height:11px;
}
.post-tag-dropdown-menu{
min-width:150px;
}
.post-tag-option{
padding:8px 11px;
font-size:0.8rem;
gap:9px;
}
.post-tag-emoji{
font-size:0.9rem;
}
.post-tag-display{
padding:3px 8px;
font-size:0.65rem;
gap:4px;
border-left-width:2px;
}
.post-tag-display .post-tag-emoji{
font-size:0.8rem;
}
}