:root{--color-switcher-zindex: 1;--color-switcher-item-size: 1.5rem;--color-switcher-default-color-size: calc(var(--color-switcher-item-size) / 1.5)}.ColorSwitcher{display:grid;grid-template-columns:repeat(auto-fill, var(--color-switcher-item-size));position:relative;column-gap:calc(var(--color-switcher-item-size) / 3);row-gap:calc(var(--color-switcher-item-size) / 6);line-height:1;z-index:var(--color-switcher-zindex);grid-auto-rows:var(--color-switcher-item-size)}.ColorSwitcher--oneLine{grid-template-rows:var(--color-switcher-item-size);grid-auto-rows:0;padding-right:calc(var(--color-switcher-item-size) / 1.2);row-gap:0}.ColorSwitcher_Item{width:100%;height:100%;position:relative;cursor:pointer}.ColorSwitcher_Input{display:none}.ColorSwitcher_Title{position:absolute;bottom:90%;left:50%;transform-origin:bottom;transform:translateX(-50%) scaleY(0.8);background-color:#fff;color:#797a7e;font-size:calc(var(--color-switcher-item-size) / 2.4);line-height:1.2;padding:calc(var(--color-switcher-item-size) / 6) calc(var(--color-switcher-item-size) / 3);border:1px solid #f4f1ec;border-radius:calc(var(--color-switcher-item-size) / 12);white-space:nowrap;visibility:hidden;z-index:calc(var(--color-switcher-zindex) + 1);transition:transform .15s}.ColorSwitcher_Title:after{content:"";position:absolute;left:50%;bottom:calc(var(--color-switcher-item-size) / -8);width:calc(var(--color-switcher-item-size) / 4);height:calc(var(--color-switcher-item-size) / 4);border:1px solid #f4f1ec;border-left-color:transparent;border-top-color:transparent;transform:translateX(-50%) rotate(45deg);background-color:#fff}.ColorSwitcher_Item:hover .ColorSwitcher_Title{visibility:visible;transform:translateX(-50%) scaleY(1)}.ColorSwitcher_Color{position:relative;width:100%;height:100%;overflow:hidden}.ColorSwitcher_Color:before{content:"";position:absolute;width:100%;height:100%;border-radius:100%;border:1px solid transparent}.ColorSwitcher_Color:hover:before{border-color:rgba(121,122,126,.5)}.ColorSwitcher_Input:checked+.ColorSwitcher_Color:before,.ColorSwitcher_Item.is-checked .ColorSwitcher_Color:before{border-color:#797a7e}.ColorSwitcher_Color i{position:absolute;width:var(--color-switcher-color-size, var(--color-switcher-default-color-size));height:var(--color-switcher-color-size, var(--color-switcher-default-color-size));top:0;left:0;right:0;bottom:0;margin:auto;border:2px solid #dbdbdb;border-radius:100%;box-sizing:content-box;overflow:hidden}.ColorSwitcher_Counter{font-size:calc(var(--color-switcher-item-size) / 2.4);line-height:var(--color-switcher-item-size);color:#797a7e;position:absolute;top:0;padding-left:calc(var(--color-switcher-item-size) / 3)}.ColorSwitcher_Counter:empty{display:none}