.color-input__pointer-transparent,.color-input__pointer-color,.color-input__slider-canvas,.color-input__slider-container{width:100%;height:100%}.color-input__text-format-arrows,.color-input__text-inputs-wrapper,.color-input__arrow-down,.color-input__arrow-up{display:flex;justify-content:center;align-items:center}.color-input__saturation-pointer,.color-input__slider-pointer{border-radius:50%;background:#fbfbfb;overflow:hidden;border:2px #fbfbfb solid;box-shadow:0 0 5px #0f0f0f4d}.color-input__arrow-down,.color-input__arrow-up{width:12px;height:10px;opacity:.4;transition:.3s;position:relative}.color-input__arrow-down:before,.color-input__arrow-up:before{display:block;content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent}.color-input__arrow-down:hover,.color-input__arrow-up:hover{opacity:.8}.color-input__popup{position:absolute;z-index:9999;width:auto;min-width:280px;background-color:#fbfbfb;box-shadow:0 5px 10px #0f0f0f66;-webkit-user-select:none;-moz-user-select:none;user-select:none;color:#0f0f0f;--popup-offset: 10px}.color-input__popup--top{translate:0 calc(var(--popup-offset) * -1)}.color-input__popup--bottom{translate:0 var(--popup-offset)}.color-input__popup--center-right{translate:var(--popup-offset) 0}.color-input__popup--center-left{translate:calc(var(--popup-offset) * -1) 0}.color-input__popup--enter-from,.color-input__popup--leave-to{transform:translateY(-10px);opacity:0}.color-input__popup--enter-active,.color-input__popup--leave-active{transition:transform .3s,opacity .3s}.color-input__slider{width:85%;height:6px;margin:18px auto;position:relative}.color-input__slider-container{display:block;top:50%;border-radius:3px;overflow:hidden;background-size:contain}.color-input__slider-canvas{display:block}.color-input__slider-active-area{position:absolute;top:50%;transform:translateY(-50%);left:0;width:100%}.color-input__slider-pointer{width:12px;height:12px}.color-input__pointer-transparent{background-size:auto 100%}.color-input__saturation-area{width:100%;height:125px;position:relative}.color-input__saturation-pointer{top:auto;width:20px;height:20px;position:absolute;bottom:0;left:0;z-index:10001}.color-input__text-inputs-area{display:flex;margin:0 7px 10px}.color-input__text-inputs-wrapper{flex:1 0;flex-wrap:wrap}.color-input__text-input-container{white-space:nowrap}.color-input__text-input{font-family:inherit;color:inherit;width:4ch;text-align:center;margin:0 5px;background:transparent;border-style:solid;border-width:1px;border-radius:3px}.color-input__text-input:focus{outline-color:var(--outline-color)}.color-input__text-input--hex{width:8ch}.color-input__text-format-arrows{flex:0 1;flex-direction:column}.color-input__arrow-up:before{border-bottom:5px solid var(--arrow-color)}.color-input__arrow-down:before{border-top:5px solid var(--arrow-color)}.color-input__box-color,.color-input__box-inner{width:100%;height:100%}.color-input{position:relative;display:inline-block}.color-input__box{width:40px;height:40px;cursor:pointer;border-radius:20%;overflow:hidden;transition:background-color .05s .15s}.color-input__box-inner{border-radius:inherit;overflow:hidden;transition:transform .2s;background-color:#fff;background-size:100%}.color-input__box-inner--active{transform:scale(.9)}.color-input__box--active{background:#fbfbfb;transition:all .2s,background-color .05s}.color-input__box--disabled{cursor:not-allowed}