:root{--khao-color-comments: var(--khao-sys-color-secondary-container);--khao-color-on-comments: var(--khao-sys-color-on-secondary-container);--khao-color-author-comments: var(--khao-sys-color-primary-container);--khao-color-on-author-comments: var(--khao-sys-color-on-primary-container)}.comments{margin-top:4rem;margin-bottom:3rem}.comments-output-wrapper{display:flex;flex-direction:column;gap:var(--khao-sys-size-regular-3)}.comments-output-wrapper .row:last-child{margin-bottom:var(--khao-sys-size-regular-5)}.comments-output-wrapper .msg{position:relative;padding:var(--khao-sys-size-regular-5) var(--khao-sys-size-regular-6);background-color:var(--khao-color-comments);color:var(--khao-color-on-comments);border-radius:var(--khao-sys-shape-corner-large);font-weight:500;box-shadow:var(--khao-sys-elevation-level1-shadow)}.comments-output-wrapper .msg a{color:var(--khao-color-on-comments);font-weight:700;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:var(--khao-sys-size-regular-1)}.comments-output-wrapper .msg a:hover{text-decoration:underline;text-decoration-thickness:2px}.comments-output-wrapper .msg a:focus-visible{outline:2px solid gray;outline-offset:0;text-decoration:none;height:var(--khao-sys-size-regular-4);border-radius:var(--khao-sys-shape-corner-small);-webkit-backdrop-filter:saturate(80%);backdrop-filter:saturate(80%)}.comments-output-wrapper .msg a:not(:is(:hover,:focus)){text-decoration-color:color-mix(in srgb,currentColor,transparent 50%)}.comments-output-wrapper .msg:after{content:"";position:absolute;display:block;width:0;z-index:1;border-style:solid;border-color:var(--khao-color-comments) transparent;border-width:var(--khao-sys-size-regular-4) var(--khao-sys-size-regular-4) 0;bottom:calc(var(--khao-sys-size-regular-4) * -1);margin-left:calc(var(--khao-sys-size-regular-4) * -1);left:var(--khao-sys-size-regular-9)}.comments-output-wrapper .from-author{background-color:var(--khao-color-author-comments)}.comments-output-wrapper .from-author:after{border-color:var(--khao-color-author-comments) transparent}.comments-output-wrapper .to-be-approved{background-color:var(--khao-sys-color-surface-container);color:var(--khao-sys-color-text)}.comments-output-wrapper .to-be-approved:after{border-color:var(--khao-sys-color-surface-container) transparent}.comments-output-wrapper .meta{font-size:var(--khao-sys-size-typography-3);margin-top:var(--khao-sys-size-regular-4);margin-left:var(--khao-sys-size-regular-2);vertical-align:center;color:currentColor}.comments-output-wrapper .name{font-weight:800}.comments-output-wrapper .name a{color:currentColor}.comments-output-wrapper .name a:hover{text-decoration:underline}.comments-form-wrapper{--khao-card-width: 100%}.comments-form{display:flex;flex-direction:column}#js-comments-submit{display:none}.comments-form-title{font-size:clamp(1.3rem,3.4vw,1.6rem);margin-left:var(--khao-sys-size-regular-1);text-align:left;margin-bottom:.5rem}.comments-form textarea,.comments-input{font-family:$font-family-primary;box-sizing:border-box;margin:5px 0;padding:10px;resize:none;font-size:1rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none}.comments-input{width:60%}.comments-submit-wrapper{margin-top:var(--khao-sys-size-regular-4)}@media screen and (max-width:620px){.comments-form textarea{height:150px!important}.comments-input{width:100%!important}}.comments-form textarea{height:100px;width:100%}@media print{.comments{display:none}}