.text-on-color{color:var(--text-on-color)!important}.picked-color{background:linear-gradient(var(--picked-color),var(--picked-color)),repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg) 50%/20px 20px}.color-picker-preview{grid-area:preview}.color-preview{width:80px;height:80px;margin:10px;border-radius:10px}.color-preview.small{width:60px;height:60px;margin:10px;border-radius:10px}.color-picker-palette{display:grid;grid-template-columns:repeat(6,min-content);gap:3px;grid-area:palette}.color-picker-grid{display:grid;grid-template-columns:100px min-content auto;grid-template-rows:auto min(auto,100px);grid-template-areas:"preview palette" "sliders sliders";height:-moz-fit-content;height:fit-content;gap:10px;margin-left:auto;margin-right:auto;width:-moz-min-content;width:min-content}.color-picker-grid.popover{padding:20px}.app-full .color-picker-grid{grid-template-columns:unset;grid-template-rows:auto min(auto,100px);grid-template-areas:"preview palette" "sliders sliders";height:-moz-fit-content;height:fit-content}.color-picker-palette button:hover{transform:scale(1.2)}.color-picker-sliders{display:grid;grid-template-columns:30px 1fr;align-items:center;text-align:center;grid-area:sliders;min-height:75px}.slider-hue .el-slider__runway{background:linear-gradient(90deg,red,#f90 10%,#cf0 20%,#3f0 30%,#0f6 40%,#0ff 50%,#06f 60%,#30f 70%,#c0f 80%,#f09 90%,red)}.slider-saturation .el-slider__runway{background:linear-gradient(90deg,#707070,var(--tint))}.slider-lightness .el-slider__runway{background:linear-gradient(90deg,#000,var(--tint) 50%,#fff)}.slider-alpha .el-slider__runway{background:linear-gradient(90deg,transparent,var(--tint-opaque)),repeating-conic-gradient(#ccc 0deg 90deg,#fff 90deg 180deg) 50%/20px 20px}.color-picker-popover-button:hover{box-shadow:inset 0 0 0 20px hsla(0,0%,100%,.3333333333333333)!important}