color-code-select{--ccs-accent: #7b1f2d;--ccs-accent-tint: rgba(123, 31, 45, .08);--ccs-accent-ring: rgba(123, 31, 45, .16);--ccs-ok: #1a7f37;--ccs-err: #b00020;--ccs-input-bg: #ffffff;--ccs-input-color: #262626;--ccs-input-border: #d9d9d9;--ccs-label-color: #262626;--ccs-radius: 10px;--ccs-list-bg: #ffffff;--ccs-list-border: #ececec;--ccs-max-width: 44rem;--ccs-font-size: 1.4rem;display:block;position:relative;max-width:var(--ccs-max-width);margin-bottom:1.2rem}.color-code-select__label{display:block;margin-bottom:.7rem;font-size:var(--ccs-font-size);font-weight:600;letter-spacing:.01em;color:var(--ccs-label-color)}.color-code-select__field{position:relative}.color-code-select__input{width:100%;padding:1.1rem 5.6rem 1.1rem 1.3rem;border:1.5px solid var(--ccs-input-border);border-radius:var(--ccs-radius);background:var(--ccs-input-bg);color:var(--ccs-input-color);font-family:inherit;font-size:var(--ccs-font-size);cursor:pointer;transition:border-color .16s ease,box-shadow .16s ease}.color-code-select__input::placeholder{color:#9a9a9a}.color-code-select__input:focus{outline:0;border-color:var(--ccs-accent);box-shadow:0 0 0 3px var(--ccs-accent-ring)}color-code-select.is-valid .color-code-select__input{border-color:var(--ccs-ok)}color-code-select.is-invalid .color-code-select__input{border-color:var(--ccs-err);box-shadow:0 0 0 3px #b0002024;animation:ccs-error-pulse .5s ease-out both}@keyframes ccs-error-pulse{0%{box-shadow:0 0 #b0002047}to{box-shadow:0 0 0 3px #b0002024}}.color-code-select__status{position:absolute;top:50%;right:3.4rem;width:1.9rem;height:1.9rem;transform:translateY(-50%);pointer-events:none}.color-code-select__caret{position:absolute;top:50%;right:1.3rem;width:1.1rem;height:.7rem;transform:translateY(-50%);color:var(--ccs-input-color);opacity:.6;display:flex;pointer-events:none}.color-code-select__caret svg{width:100%;height:100%}.color-code-select__status>span{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;opacity:0;transform:scale(.5);transition:opacity .18s ease,transform .22s cubic-bezier(.34,1.56,.64,1)}.color-code-select__status svg{width:100%;height:100%}.color-code-select__status-ok{color:var(--ccs-ok)}.color-code-select__status-err{color:var(--ccs-err)}color-code-select.is-valid .color-code-select__status-ok,color-code-select.is-invalid .color-code-select__status-err{opacity:1;transform:scale(1)}.color-code-select__list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;margin:0;padding:.5rem;max-height:24rem;overflow-y:auto;list-style:none;background:var(--ccs-list-bg);border:1px solid var(--ccs-list-border);border-radius:var(--ccs-radius);box-shadow:0 1rem 2.8rem #26262624;scrollbar-width:none;-ms-overflow-style:none}.color-code-select__list::-webkit-scrollbar{display:none}color-code-select.is-open .color-code-select__list{display:block;animation:ccs-pop-in .16s ease}@keyframes ccs-pop-in{0%{opacity:0;transform:translateY(-.4rem)}to{opacity:1;transform:translateY(0)}}.color-code-select__item{padding:.85rem 1rem;border-radius:calc(var(--ccs-radius) - 4px);font-size:var(--ccs-font-size);line-height:1.4;color:var(--ccs-input-color);cursor:pointer;transition:background-color .12s ease,color .12s ease}.color-code-select__item:hover,.color-code-select__item.is-active{background:var(--ccs-accent-tint);color:var(--ccs-accent)}.color-code-select__message{margin:0;font-size:1.3rem;font-weight:600;line-height:1.4}.color-code-select__message:empty{display:none}.color-code-select__message.is-error,.color-code-select__message.is-success{display:flex;align-items:center;gap:.5rem;margin-top:.7rem;padding:.7rem 1rem;border-radius:.8rem;animation:ccs-msg-in .26s ease both}.color-code-select__message.is-error:before,.color-code-select__message.is-success:before{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;color:#fff;font-size:1rem;font-weight:700;line-height:1.5rem;text-align:center}.color-code-select__message.is-error{color:var(--ccs-err);background:#b0002014}.color-code-select__message.is-error:before{content:"!";background:var(--ccs-err)}.color-code-select__message.is-success{color:var(--ccs-ok);background:#1a7f371a}.color-code-select__message.is-success:before{content:"\2713";background:var(--ccs-ok)}@keyframes ccs-msg-in{0%{opacity:0;transform:translateY(.4rem)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.color-code-select__input,.color-code-select__status>span,color-code-select.is-open .color-code-select__list,.color-code-select__message.is-error,.color-code-select__message.is-success{animation:none;transition:none}}
/*# sourceMappingURL=/cdn/shop/t/31/assets/color-code-autocomplete.css.map */