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