.diary-reaction .reaction-button-wrapper{align-items:center;display:inline-flex}.diary-reaction .reaction-preview{grid-template-columns:repeat(4,minmax(35px,1fr));margin-top:8px;width:100%}@media(min-width:521px)and (max-width:920px){.diary-reaction .reaction-preview{grid-template-columns:repeat(3,minmax(35px,1fr))}}@media(min-width:0)and (max-width:520px){.diary-reaction .reaction-preview{grid-template-columns:repeat(3,minmax(35px,1fr))}}.diary-reaction .reaction-picker{bottom:35px;left:-10px}.diary-reaction .reaction-picker__container{background-color:rgba(var(--z-common-item-bg),.85);border:1px solid rgba(var(--z-border-color));box-shadow:0 4px 20px #0000001a;display:grid;gap:5px;grid-template-columns:repeat(4,minmax(30px,1fr));padding:12px 14px}.diary-reaction .reaction-picker__item{align-items:center;border-radius:8px;display:flex;justify-content:center;position:relative;transition:all .2s ease}.diary-reaction .reaction-picker__item:hover{background-color:rgba(var(--z-plain-bg),.6);transform:scale(1.15)}.diary-reaction .reaction-picker__item:hover .color-icon{opacity:1}.diary-reaction .reaction-picker__item:hover .default-icon{opacity:0}.diary-reaction .reaction-picker__item .icon-emoji,.diary-reaction .reaction-picker__item img{height:24px;transition:all .2s ease;width:24px}.diary-reaction .reaction-picker__item .animation-icon{display:none}.diary-reaction .reaction-picker__item .animation-icon.celebrate-svg,.diary-reaction .reaction-picker__item .animation-icon.clap-svg,.diary-reaction .reaction-picker__item .animation-icon.fire-svg,.diary-reaction .reaction-picker__item .animation-icon.heart-svg,.diary-reaction .reaction-picker__item .animation-icon.laugh-svg,.diary-reaction .reaction-picker__item .animation-icon.like-svg,.diary-reaction .reaction-picker__item .animation-icon.rocket-svg,.diary-reaction .reaction-picker__item .animation-icon.sad-svg,.diary-reaction .reaction-picker__item .animation-icon.surprised-svg,.diary-reaction .reaction-picker__item .animation-icon.think-svg{animation-duration:.8s;animation-fill-mode:both;animation-name:floatUp;display:block;position:absolute}.diary-reaction .reaction-preview .preview-item{background-color:rgba(var(--z-plain-bg),.6);border-radius:5px;padding:1px 9px;transition:all .2s ease;width:-moz-fit-content;width:fit-content}.diary-reaction .reaction-preview .preview-item:hover{background-color:rgba(var(--z-primary-color),.15);transform:translateY(-2px)}.diary-reaction .reaction-preview .preview-item.selected{background-color:rgba(var(--z-primary-color),.25);border:1px solid rgba(var(--z-primary-color),.5)}.diary-reaction .reaction-preview .preview-item.selected .preview-icon,.diary-reaction .reaction-preview .preview-item.selected .preview-icon-svg{filter:brightness(1.2);opacity:1}.diary-reaction .reaction-preview .preview-item.selected .preview-count{color:rgba(var(--z-primary-color));font-weight:700}.diary-reaction .reaction-preview .preview-item.animating{animation:bounce .4s ease}.diary-reaction .reaction-preview .preview-item.animating .preview-count{animation:countPop .4s ease}.diary-reaction .reaction-preview .preview-item .preview-icon{height:18px;margin-right:3px;width:18px}.diary-reaction .reaction-preview .preview-item .preview-icon-svg{color:rgba(var(--z-primary-color));height:18px;margin-right:4px;width:18px}.diary-reaction .reaction-preview .preview-item .preview-count{color:rgba(var(--z-fontcolor),.8);font-size:13px;font-weight:600}.reaction-picker-enter-active,.reaction-picker-leave-active{transition:all .25s ease}.reaction-picker-enter-from,.reaction-picker-leave-to{opacity:0;transform:translateY(10px) scale(.95)}.preview-fade-enter-active,.preview-fade-leave-active{transition:all .3s ease}.preview-fade-enter-from,.preview-fade-leave-to{opacity:0;transform:translateY(-5px)}.preview-item-enter-active,.preview-item-leave-active{transition:all .3s ease}.preview-item-enter-from,.preview-item-leave-to{opacity:0;transform:scale(.8)}@keyframes floatUp{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-30px) scale(1.2)}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes countPop{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}