.icon-swap-vert{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%23222'%3e%3cpath d='M320-440v-287L217-624l-57-56 200-200 200 200-57 56-103-103v287h-80ZM600-80 400-280l57-56 103 103v-287h80v287l103-103 57 56L600-80Z'/%3e%3c/svg%3e")}.app__main{background:var(--bs-body-bg);border:1px solid var(--bs-border-color);padding:1rem;display:grid;grid-template-areas:"preview input" "preview separator" "preview output";grid-template-columns:20% auto;gap:1rem}.app__color-preview{grid-area:preview}.app__input-color{grid-area:input}.app__output-color{grid-area:output}.app__separator{padding:.5rem 0;grid-area:separator;position:relative;display:flex;justify-content:space-around}.app__separator:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--bs-border-color)}.app__separator a{display:flex;align-items:center;gap:.5rem;padding:0 1rem;text-decoration:none;background:var(--bs-body-bg);position:relative}.app__separator .bi-block{--size:2rem}.app__cmyk,.app__rgb{padding:0}.app__cmyk label,.app__rgb label{margin-top:1rem;width:100%;overflow:hidden;text-wrap:nowrap;text-overflow:ellipsis}.app-color-preview{width:100%;aspect-ratio:1;border-radius:var(--bs-border-radius);padding:.25rem;border:1px solid var(--bs-border-color);position:relative}.app-color-preview:before{content:"";inset:.25rem;background:#fff var(--app-icon-no-bg-url);position:absolute;border-radius:inherit}.app-color-preview__color{width:100%;height:100%;border-radius:inherit;position:relative}.app-color-preview small{position:absolute;top:100%;left:0;right:0;text-align:center;padding-top:.5rem}