.attachmentUploads{display:none;margin-bottom:var(--xf-paddingLarge);&.is-active{display:block}&.attachmentUploads--spaced{margin-top:var(--xf-paddingLarge)}.hScroller-action{color:var(--xf-linkColor);&:hover{color:var(--xf-linkHoverColor)}&.hScroller-action--start{&:before{content:"";position:absolute;left:0;height:50px;width:35px;background:var(--xf-contentBg);border-top-right-radius:var(--xf-borderRadiusMedium);border-bottom-right-radius:var(--xf-borderRadiusMedium);box-shadow:1px 0 4px 1px #0000004d}&:after{position:absolute;left:10px}}&.hScroller-action--end{&:before{content:"";position:absolute;right:0;height:50px;width:35px;background:var(--xf-contentBg);border-top-left-radius:var(--xf-borderRadiusMedium);border-bottom-left-radius:var(--xf-borderRadiusMedium);box-shadow:-1px 0 4px 1px #0000004d}&:after{position:absolute;right:10px}}}}.attachmentUploads-banner{color:var(--xf-contentAltBase--color);background:var(--xf-contentAltBase--background-color);border:var(--xf-borderSize) solid var(--xf-borderColor);border-radius:var(--xf-borderRadiusSmall);margin-top:var(--xf-paddingLarge);padding:var(--xf-paddingSmall) var(--xf-paddingMedium)}.attachmentUploads-selectActions{list-style:none;margin:0;padding:0;display:none;font-size:var(--xf-fontSizeSmall);.attachmentUploads.is-selecting &{display:flex}>li{margin-right:.35em;.buttonGroup{vertical-align:middle}&:last-of-type{flex:1 1 auto;text-align:right}}.selectAll .iconic{cursor:pointer;input+i{color:var(--xf-linkColor)}}}.is-selecting button.js-attachmentSelect{float:right}.file{position:relative;width:165px;height:165px;margin-right:var(--xf-paddingMedium);background:var(--xf-contentAltBg);border-radius:var(--xf-borderRadiusSmall);&:last-child{margin-right:0}}.attachUploadList{list-style:none;margin:0;padding:0;display:block;white-space:nowrap;font-size:0;.file{display:inline-block;font-size:var(--xf-fontSizeNormal)}}.attachmentList{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;.file{margin-bottom:var(--xf-paddingMedium)}}@supports (display: grid){.attachmentList{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));grid-gap:var(--xf-paddingMedium);gap:var(--xf-paddingMedium);.file{width:100%;height:auto;margin-right:0;margin-bottom:0;&:after{content:"";display:block;padding-bottom:100%;pointer-events:none}}}}.file-preview{display:flex;align-items:center;justify-content:center;border-radius:var(--xf-borderRadiusSmall);overflow:hidden;position:absolute;top:0;left:0;width:100%;height:100%;img,video{position:absolute;top:0;left:0;object-fit:cover;width:100%;height:100%}.file--linked &:after{content:"";position:absolute;inset:0;z-index:calc(var(--xf-zIndexMultiplier) * 1)}}.file-typeIcon{font-size:80px;vertical-align:middle;color:var(--xf-textColorFeature)}.file-error{color:var(--xf-textColorAttention);font-size:var(--xf-fontSizeSmaller);white-space:normal;padding:var(--xf-paddingMedium)}.file-progress{position:relative;width:100%;width:calc(100% - 8px);font-size:var(--xf-fontSizeSmallest);line-height:1.3;i{position:absolute;top:0;bottom:0;left:0;background:var(--xf-progressBarColor);color:hsl(from lch(from var(--xf-progressBarColor) calc((71.55 - l) * infinity) 0 0) 0 0% l / 1);border-radius:var(--xf-borderRadiusSmall);padding-right:.2em;text-align:right;font-style:normal;white-space:nowrap;min-width:2em;-webkit-transition:width var(--xf-animationSpeed) ease;transition:width var(--xf-animationSpeed) ease}}.file-content{position:absolute;width:100%;height:100%}.file-info{position:absolute;left:0;bottom:0;width:100%;padding:0 var(--xf-paddingLarge);height:2.5em;line-height:2.5;overflow:hidden;-webkit-transition:height var(--xf-animationSpeed) ease;transition:height var(--xf-animationSpeed) ease;border-bottom-left-radius:var(--xf-borderRadiusSmall);border-bottom-right-radius:var(--xf-borderRadiusSmall);font-size:var(--xf-fontSizeSmaller);color:#fff;background:#00000080;text-shadow:1px 1px 1px rgba(0,0,0,.6);@supports (backdrop-filter: blur(3px)) or (-webkit-backdrop-filter: blur(3px)){@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none){--backdrop-filter: blur(3px);-webkit-backdrop-filter:var(--backdrop-filter);backdrop-filter:var(--backdrop-filter)}@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){background:none}}a&{color:#fff;&:hover{color:#fff;text-decoration:none;.file-name{text-decoration:underline}}}&:hover,.file--linked:hover &,.has-touchevents &{height:5em}}.file-name,.file-meta{display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.file-delete,.file-insert{position:absolute;color:#fff;text-shadow:1px 1px 1px rgba(0,0,0,.6)}.file-checkbox{display:none;.attachmentUploads.is-selecting &{display:block}.iconic{position:static;&:after{content:"";position:absolute;inset:0;z-index:calc(var(--xf-zIndexMultiplier) * 1)}>i{position:absolute;top:4px;left:4px;box-sizing:content-box;width:1em;height:1em;color:#dcdcdc;text-shadow:1px 1px 1px rgba(0,0,0,.6);background:#0003;border-radius:var(--xf-borderRadiusMedium);padding:var(--xf-paddingMedium);line-height:1}&:hover>i{color:#fff;&:before{content:url("./check-square-GFUEFYSH.svg")}}>input+i{&:before,&:after{top:var(--xf-paddingMedium);left:var(--xf-paddingMedium)}}>input:checked+i:after{font-weight:700}}}.file-insert{top:4px;left:4px;font-size:var(--xf-fontSizeSmaller);max-width:125px;white-space:normal;word-wrap:break-word;&.is-active{.file-insertLink{display:none}.file-menuOptions{display:block}}}.file-delete{top:4px;right:4px;font-size:var(--xf-fontSizeNormal)}.file-insert,.file-delete{.attachmentUploads.is-selecting &{display:none}}.file-insertLink,.file-deleteLink{display:inline-block}a.file-deleteLink{color:inherit;background:#0003;border-radius:var(--xf-borderRadiusMedium);padding:var(--xf-paddingMedium);-webkit-transition:background var(--xf-animationSpeed) ease;transition:background var(--xf-animationSpeed) ease;&:hover{text-decoration:none;background:#00000080}}a.file-insertLink,.file-menuOptions>a{color:inherit;background:#0006;border-radius:var(--xf-borderRadiusMedium);padding:var(--xf-paddingMedium);-webkit-transition:background var(--xf-animationSpeed) ease;transition:background var(--xf-animationSpeed) ease;&:hover{text-decoration:none;background:#00000080}}.file-menuOptions{list-style:none;margin:0;padding:0;display:none;>a{display:block;margin-top:var(--xf-paddingSmall);max-width:max-content;&:first-child{margin-top:0}}}@media(max-width:480px){.attachmentUploads{.iconic-label,.insert-label{display:none}}}