/* Bergamota: peças só da ferramenta de Imagens (o resto vem de bergamota.css). */
.qlabels { display: flex; justify-content: space-between; color: var(--ink-3); font-size: .78rem; margin-top: -.15rem; }
.color { width: 100%; height: 2.75rem; padding: .2rem; border-radius: 12px; border: 1px solid var(--line); background: var(--panel-2); cursor: pointer; }
.side__tip { padding-top: .2rem; border-top: 1px solid var(--line); }
.row__thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
.more:not([open]) { padding-bottom: .25rem; }

/* Antes e depois (Remover fundo, Ampliar, Marca d'água, SVG): a imagem "depois" por baixo e a "antes" por cima, cortada pela barra */
.cmp { position: relative; width: 100%; max-width: 34rem; aspect-ratio: 4 / 3; margin-top: .5rem; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); touch-action: pan-y; }
.cmp--single { aspect-ratio: auto; max-height: 22rem; display: grid; place-items: center; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.cmp--single .cmp__img { position: static; max-height: 22rem; }
.cmp__img--checker { background: repeating-conic-gradient(#c9c9c9 0 25%, #f4f4f4 0 50%) 0 0 / 16px 16px; }
.cmp__img--pixel { image-rendering: pixelated; }
.cmp__top { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--cut, 50%)) 0 0); background: var(--panel-2); }
.cmp__top .cmp__img { background: var(--panel-2); }
.cmp__range { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 2.75rem; margin: 0; background: transparent; cursor: ew-resize; accent-color: var(--accent); opacity: .9; }
.cmp__tag { position: absolute; top: .4rem; padding: .15rem .5rem; border-radius: 99px; font-size: .74rem; color: #fff; background: rgb(0 0 0 / .55); pointer-events: none; }
.cmp__tag--l { left: .4rem; }
.cmp__tag--r { right: .4rem; }
@media (max-width: 560px) { .cmp { max-width: 100%; } }