*{box-sizing:border-box}:root{--speed: .4s;--ease: ease-in-out}body{margin:0;overflow:hidden}.screen-reader-text{height:0;overflow:hidden;position:absolute;width:0}#app{background-color:pink;display:flex;flex-direction:column;height:100vh}#color-overlay{display:block;pointer-events:none;position:absolute;transition:height var(--speed) var(--ease),left var(--speed) var(--ease),top var(--speed) var(--ease),width var(--speed) var(--ease),visibility var(--speed) var(--ease);visibility:hidden;will-change:height,left,top,width;z-index:1}#color-overlay[data-transition=true]{transition:all 1ms}#color-overlay:not([hidden]){height:100%!important;pointer-events:auto;left:0!important;top:0!important;visibility:visible;width:100%!important}.color-list{display:flex;list-style-type:none;margin:0;padding:0}[data-opacity="0%"]{opacity:0%}[data-opacity="10%"]{opacity:10%}[data-opacity="20%"]{opacity:20%}[data-opacity="30%"]{opacity:30%}[data-opacity="40%"]{opacity:40%}[data-opacity="50%"]{opacity:50%}[data-opacity="60%"]{opacity:60%}[data-opacity="70%"]{opacity:70%}[data-opacity="80%"]{opacity:80%}[data-opacity="90%"]{opacity:90%}[data-opacity="100%"]{opacity:100%}.overlay-overlay{background-color:#000;height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;width:100%}.overlay-overlay,.color-overlay{background-color:#000}.color-list,.color-overlay{flex-grow:1}#color-viewer{background-color:#fff;display:block;height:100%;left:0;opacity:1;position:fixed;top:0;transition:opacity var(--speed) var(--ease);width:100%;z-index:2}#color-viewer[hidden]{opacity:0;pointer-events:none}#toggle-viewer,#add-color{appearance:none;background-color:#fff;border-radius:2rem;border-width:0;padding:.5rem;position:absolute;right:1rem}#toggle-viewer{pointer-events:auto;top:1rem;z-index:2}.color-viewer-toolbar{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}#add-color{bottom:1rem}[name=set-color]{appearance:none;background-color:transparent;border-width:0;transition:background-color .25s ease-out}[name=set-color]:hover{background-color:#fff}.button-icon-wrapper{display:flex;margin:0;position:relative}.button-icon{height:auto;opacity:1;transition:opacity var(--speed) var(--ease);width:2em}.button-icon--close{left:0;position:absolute}#color-viewer:not([hidden])+#toggle-viewer .button-icon--open{opacity:0}#color-viewer[hidden]+#toggle-viewer .button-icon--close{opacity:0}