.y-color-picker{--color-picker-title-border-color:var(--y-color-border);--color-picker-title-hover-border-color:var(--y-color-primary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:3px;border-radius:6px;border:1px solid var(--color-picker-title-border-color)}.y-color-picker:hover{border-color:var(--color-picker-title-hover-border-color)}.y-color-picker.is-active{border-color:var(--color-picker-title-hover-border-color)}.y-color-picker__title{height:100%;width:100%;border-radius:inherit;box-sizing:border-box}.y-color-picker__title--color{display:block;border-radius:inherit;height:100%;position:relative;overflow:hidden}.y-color-picker__title--color::after{position:absolute;content:"";width:100%;height:100%;background-color:#ccc;background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(135deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(135deg,transparent 75%,#333 75%);background-size:8px 8px;background-position:0 0,4px 0,4px -4px,0 4px}.y-color-picker__title--color::before{position:absolute;content:"";width:100%;height:100%;z-index:2;background-color:var(--y-color-picker-title-bg)}.y-color-picker__content{--y-color-picker-content-bg:var(--y-color-bg-elevated);padding:12px;width:260px;background-clip:padding-box;border-radius:8px;box-shadow:0 6px 16px 0 rgba(0,0,0,.08),0 3px 6px -4px rgba(0,0,0,.12),0 9px 28px 8px rgba(0,0,0,.05);background-color:var(--y-color-picker-content-bg)}.y-color-picker__panel{position:relative;height:160px;border-radius:4px;overflow:hidden}.y-color-picker__panel--colors{position:absolute;inset:0;box-sizing:border-box;box-shadow:inset 0 0 1px 0 var(--y-color-text-quaternary);cursor:pointer}.y-color-picker__panel--move{position:absolute;width:16px;height:16px;border-radius:50%;cursor:pointer;box-sizing:border-box;border:2px solid var(--y-color-bg-elevated)}.y-color-picker__slider{margin:12px 0}.y-color-picker__slider--block{width:28px;height:28px;border-radius:4px;overflow:hidden;background-color:#ccc;background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(135deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(135deg,transparent 75%,#333 75%);background-size:8px 8px;background-position:0 0,4px 0,4px -4px,0 4px}.y-color-picker__slider--color{display:block;height:100%;width:100%}.y-hue-slider{position:relative;height:8px;border-radius:4px;width:100%}.y-hue-slider__bar{position:absolute;border-radius:inherit;cursor:pointer}.y-hue-slider__move{position:absolute;top:-2px;width:12px;height:12px;border:2px solid var(--y-color-bg-elevated);box-sizing:border-box;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 1px 0 var(--y-color-text-quaternary),0 0 0 1px var(--y-color-fill-secondary)}.y-alpha-slider{position:relative;height:8px;border-radius:4px;width:100%;background-color:#ccc;background-image:linear-gradient(45deg,#333 25%,transparent 25%),linear-gradient(135deg,#333 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#333 75%),linear-gradient(135deg,transparent 75%,#333 75%);background-size:8px 8px;background-position:0 0,4px 0,4px -4px,0 4px}.y-alpha-slider__bar{position:absolute;border-radius:inherit;cursor:pointer}.y-alpha-slider__move{position:absolute;top:-2px;width:12px;height:12px;border:2px solid var(--y-color-bg-elevated);box-sizing:border-box;border-radius:50%;cursor:pointer;box-shadow:inset 0 0 1px 0 var(--y-color-text-quaternary),0 0 0 1px var(--y-color-fill-secondary)}