import e from"style-inject";var r='.l3-style-color-item-wrapper {\n  --border-radius-multiplier: 1;\n  /* stylelint-disable scss/operator-no-unspaced */\n  margin: 4px;\n  display: flex;\n  list-style-type: none;\n  position: relative;\n}\n.l3-style-color-item-wrapper.circle {\n  --border-radius-multiplier: 99999;\n}\n.l3-style-color-item-wrapper .feedback-indicator {\n  position: absolute;\n  inset: 0;\n  pointer-events: none;\n}\n.l3-style-color-item-wrapper:focus, .l3-style-color-item-wrapper:focus-visible, .l3-style-color-item-wrapper.active {\n  outline: none;\n}\n.l3-style-color-item-wrapper:focus .feedback-indicator:before, .l3-style-color-item-wrapper:focus-visible .feedback-indicator:before, .l3-style-color-item-wrapper.active .feedback-indicator:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: rgba(0, 0, 0, 0.7);\n  border-color: var(--primary-selected-color);\n  pointer-events: none;\n}\n.l3-style-color-item-wrapper:focus .feedback-indicator:after, .l3-style-color-item-wrapper:focus-visible .feedback-indicator:after, .l3-style-color-item-wrapper.active .feedback-indicator:after {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -1px;\n  border: 1px solid;\n  border-color: #000000;\n  border-color: #000000;\n  pointer-events: none;\n}\n.l3-style-color-item-wrapper:hover:not(.active):not(.selected-color) .feedback-indicator {\n  content: " ";\n  position: absolute;\n  border-radius: calc(8px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 4px solid;\n  border-color: #c5c7d0;\n  border-color: var(--color-transparent-white-03);\n  pointer-events: none;\n}\n.l3-style-color-item-wrapper .color-item {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border: 2px solid transparent;\n  border-radius: calc(4px * var(--border-radius-multiplier, 1));\n  cursor: pointer;\n}\n.l3-style-color-item-wrapper .color-item .color-indicator-wrapper {\n  margin-top: 3px;\n}\n.l3-style-color-item-wrapper .color-item.color-item-size-small {\n  width: 24px;\n  height: 24px;\n}\n.l3-style-color-item-wrapper .color-item.color-item-size-medium {\n  width: 32px;\n  height: 32px;\n}\n.l3-style-color-item-wrapper .color-item.color-item-size-large {\n  width: 40px;\n  height: 40px;\n}\n.l3-style-color-item-wrapper.selected-color {\n  position: relative;\n}\n.l3-style-color-item-wrapper.selected-color:before {\n  content: " ";\n  position: absolute;\n  border-radius: calc(7px * var(--border-radius-multiplier, 1));\n  inset: -4px;\n  border: 2px solid;\n  border-color: #000000;\n  border-color: #000000;\n  pointer-events: none;\n}\n.l3-style-color-item-wrapper.selected-color .feedback-indicator:before {\n  display: none;\n}\n.l3-style-color-item-wrapper .color-item-text-mode:hover {\n  background-color: var(--primary-background-hover-color) !important;\n}\n.l3-style-color-item-wrapper .color-icon-white {\n  color: var(--color-snow_white);\n}';e(r,{insertAt:"top"});export{r as default};
