.color-picker-wrapper{display:inline-block;position:relative}.color-picker__trigger{display:inline-block}.color-picker__popover{top:calc(100% + var(--cds-spacing-01));z-index:9000;pointer-events:auto;position:absolute;left:-7px}.color-picker__popover:before{content:"";border-left:5px solid #0000;border-right:5px solid #0000;border-bottom:5px solid var(--cds-layer-01);pointer-events:none;width:0;height:0;position:absolute;bottom:100%;left:10px}.color-picker__content{padding:var(--cds-spacing-03);background-color:var(--cds-layer-01);pointer-events:auto;border-radius:4px;box-shadow:0 2px 6px #0000004d}.color-picker__grid{align-items:center;gap:var(--cds-spacing-03);flex-direction:row;display:flex}.color-picker__option{cursor:pointer;width:20px;height:20px;transition:all var(--cds-duration-fast-02)ease;pointer-events:auto;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative;border-radius:50%!important}.color-picker__option:hover{transform:scale(1.1)}.color-picker__option--selected:after{content:"";border:2.5px solid var(--cds-layer-01);border-radius:50%;width:15px;height:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-picker__option:focus{box-shadow:0 0 0 2px var(--cds-layer),0 0 0 4px var(--cds-focus);outline:none}.color-picker__custom-button{cursor:pointer;width:20px;height:20px;transition:all var(--cds-duration-fast-02)ease;z-index:1;pointer-events:auto;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;display:flex;position:relative;border-radius:50%!important}.color-picker__custom-button:before{content:"";-webkit-mask-composite:xor;transition:all var(--cds-duration-fast-02)ease;pointer-events:none;background:conic-gradient(red 0deg,#ff0 60deg,#0f0 120deg,#0ff 180deg,#00f 240deg,#f0f 300deg,red 360deg);border-radius:50%;padding:3px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);mask-image:linear-gradient(#fff 0 0),linear-gradient(#fff 0 0);-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0;-webkit-mask-size:auto,auto;mask-size:auto,auto;-webkit-mask-repeat:repeat,repeat;mask-repeat:repeat,repeat;-webkit-mask-clip:content-box,border-box;mask-clip:content-box,border-box;-webkit-mask-origin:content-box,border-box;mask-origin:content-box,border-box;-webkit-mask-composite:xor;mask-composite:exclude;-webkit-mask-source-type:auto,auto;mask-mode:match-source,match-source}.color-picker__custom-button:hover{background:var(--cds-layer-hover);transform:scale(1.1)}.color-picker__custom-button:hover:before{padding:2px}.color-picker__custom-button:focus{box-shadow:0 0 0 2px var(--cds-layer),0 0 0 4px var(--cds-focus);outline:none}.color-picker__add-icon{color:var(--cds-icon-primary);z-index:2;pointer-events:none;position:relative}.color-picker__input-container{gap:var(--cds-spacing-05);flex-direction:column;min-width:240px;display:flex}.color-picker__input-row{align-items:flex-start;gap:var(--cds-spacing-03);display:flex}.color-picker__color-preview{border:2px solid var(--cds-border-subtle-01);background-color:#0000;background-image:linear-gradient(45deg,var(--cds-layer-02)25%,transparent 25%),linear-gradient(-45deg,var(--cds-layer-02)25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--cds-layer-02)75%),linear-gradient(-45deg,transparent 75%,var(--cds-layer-02)75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px;border-radius:50%;flex-shrink:0;width:32px;height:32px}