.comments-box{display:flex;gap:1rem;flex-direction:column;margin:2rem 0 0;background:color-mix(in srgb,var(--color-primary-50) 40%,transparent);padding:2rem 0;.alert{font-size:.95rem;padding:.5rem .7rem;&.alert-success{border-right:3px solid #27ae60;color:#27ae60;background-color:color-mix(in srgb,#27ae60 5%,transparent)}&.alert-danger{border-right:3px solid #e74c3c;color:#e74c3c;background-color:color-mix(in srgb,#e74c3c 5%,transparent)}}>div.container{width:100%}h3{font-weight:900;font-size:15px;color:var(--color-primary-500);display:flex;align-items:center;gap:10px;&:before{content:"";width:7px;height:16px;border-radius:4px;margin-left:.5rem;background-color:var(--color-primary-500)}}form.comment-form{display:flex;background-color:#fff;flex-direction:column;overflow:hidden;box-shadow:0 4px 2px #00000005;border-radius:5px;padding:1.3rem;margin:1.5rem 0;gap:1rem;.comment-form-field-head{display:flex;flex-direction:row;align-items:flex-start;gap:1rem;flex-wrap:wrap;>div{width:30%;min-width:255px}}label{font-size:.9rem!important;color:var(--color-gray-300);font-weight:700;margin-bottom:.5rem;display:flex}input,textarea{width:100%;color:var(--color-gray-300);padding:.5rem;border:1px solid color-mix(in srgb,var(--color-gray-100) 65%,transparent);border-radius:4px;&:active,&:focus{outline:none;border-color:var(--color-primary-600)}}textarea{min-height:130px;resize:vertical;margin-bottom:0;display:flex}button{display:inline-flex;background:var(--color-primary-500);color:var(--color-gray-50);border:none;padding:.5rem 1rem;border-radius:4px;cursor:pointer;&[type=button]{background:transparent;color:var(--color-gray-300)}}.comment-form-field-error,.error{display:flex;font-weight:700;margin-top:.5rem;font-size:.8rem;color:#e74c3c}}.comments-list{display:flex;flex-direction:column;padding:1.3rem;margin:1.5rem 0;gap:1.5rem;>.comment{display:flex;flex-direction:column;gap:.2rem;p.meta{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:.5rem;font-size:.9rem;color:var(--color-gray-400);span{font-size:.8rem;direction:ltr;color:var(--color-gray-200)}}.comment-content{transition:all .2s;display:flex;flex-direction:row;align-items:flex-start;gap:1.5rem;background-color:#fff;box-shadow:0 4px 2px #00000005;border-radius:5px;padding:1.3rem;border-right:3px solid var(--color-primary-100);&:hover{border-right:3px solid var(--color-primary-600);button.reply-button{background-color:var(--color-gray-300)}}img{border-radius:50%;max-width:20%;width:60px}>div{display:flex;flex-direction:column;width:100%;>p{font-size:.95rem;line-height:2rem;color:var(--color-gray-300);margin:0}}}.replies{margin-right:3%;display:flex;flex-direction:column;gap:1rem;margin-top:1rem}form.comment-form.reply-form{border-top:1px solid var(--color-gray-50);padding-top:2rem}.reply-button-box{display:flex;justify-content:flex-end;>button.reply-button{transition:all .2s;border-radius:15px;background-color:var(--color-gray-100);color:#fff;font-size:.8rem;padding:.1rem .5rem;cursor:pointer;border:none}}}}}