.color-picker{gap:var(--cds-spacing-03);padding:var(--cds-spacing-03);flex-direction:column;display:flex}.color-picker__group{gap:var(--cds-spacing-02);flex-direction:column;display:flex}.color-picker__group-label{font-size:var(--cds-label-01-font-size,.75rem);line-height:var(--cds-label-01-line-height,1rem);letter-spacing:var(--cds-label-01-letter-spacing,.32px);color:var(--cds-text-secondary)}.color-picker__grid{align-items:center;gap:var(--cds-spacing-03);flex-flow:wrap;display:flex}.color-picker__option,.color-picker__custom-button{cursor:pointer;width:20px;height:20px;transition:transform var(--cds-duration-fast-02) var(--cds-standard-easing);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,.color-picker__custom-button:hover{transform:scale(1.1)}.color-picker__option:focus-visible,.color-picker__custom-button:focus-visible{box-shadow:0 0 0 2px var(--cds-layer),0 0 0 4px var(--cds-focus);outline:none}.color-picker__option--light,.color-picker__option--default{box-shadow:inset 0 0 0 1px var(--cds-border-subtle-01)}.color-picker__option--default{background-image:linear-gradient(135deg, transparent calc(50% - 1px), var(--cds-icon-secondary) calc(50% - 1px), var(--cds-icon-secondary) calc(50% + 1px), transparent calc(50% + 1px));background-color:#0000!important}.color-picker__option--selected:after{content:"";border:2.5px solid var(--cds-layer);border-radius:50%;width:15px;height:15px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.color-picker__option--light.color-picker__option--selected:after,.color-picker__option--default.color-picker__option--selected:after{border-color:var(--cds-border-strong-01)}.color-picker__custom-button{background:0 0}.color-picker__custom-button:before{content:"";-webkit-mask-composite:xor;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)}.color-picker__add-icon{color:var(--cds-icon-primary);pointer-events:none;position:relative}.color-picker__input-row{align-items:flex-start;gap:var(--cds-spacing-03);min-width:240px;display:flex}