@arco-design/web-react/lib/InputTag/style/index.css

Arco Design React UI Library.

@keyframes arco-draggable-item-blink{0%{opacity:1}50%{opacity:.3}100%{opacity:1}}.arco-draggable-item{box-sizing:border-box;list-style:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.arco-draggable-item-dragging{opacity:.3}.arco-draggable-item-dragover.arco-draggable-item-gap-left{box-shadow:-1px 0 rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-right{box-shadow:1px 0 rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-top{box-shadow:0 -1px rgb(var(--primary-6))}.arco-draggable-item-dragover.arco-draggable-item-gap-bottom{box-shadow:0 1px rgb(var(--primary-6))}.arco-draggable-item-dragged{animation:arco-draggable-item-blink .8s;animation-timing-function:cubic-bezier(0,0,1,1)}.arco-input-tag{display:inline-block;box-sizing:border-box;width:100%;padding-left:4px;padding-right:4px;border-radius:var(--border-radius-small);vertical-align:top;cursor:text;transition:all .1s cubic-bezier(0,0,1,1);background-color:var(--color-fill-2);color:var(--color-text-1);border:1px solid transparent}.arco-input-tag-view{display:flex;width:100%}.arco-input-tag-inner{display:flex;align-items:center;flex-wrap:wrap;flex-grow:1;position:relative;box-sizing:border-box;overflow:hidden}.arco-input-tag-prefix,.arco-input-tag-suffix{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-width:22px}.arco-input-tag-prefix{padding-left:8px;padding-right:4px}.arco-input-tag-suffix{padding-right:8px}.arco-input-tag .arco-input-tag-clear-icon{display:none;font-size:12px;color:var(--color-text-2);cursor:pointer}.arco-input-tag .arco-input-tag-clear-icon>svg{transition:color .1s cubic-bezier(0,0,1,1);position:relative}.arco-input-tag:hover .arco-input-tag-clear-icon{display:block}.arco-input-tag:hover .arco-input-tag-clear-icon~*{display:none}.arco-input-tag:not(.arco-input-tag-focus) .arco-input-tag-clear-icon:hover::before{background-color:var(--color-fill-4)}.arco-input-tag:not(.arco-input-tag-focus) .arco-draggable-item{cursor:move}.arco-input-tag-input{width:4px;max-width:100%;padding:0;border:none;outline:0;background:0 0;font-size:inherit;cursor:inherit;color:inherit;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.arco-input-tag-input:first-child{width:100%}.arco-tag+.arco-input-tag-input[disabled]{width:0}.arco-input-tag-input-mirror{position:absolute;top:0;left:0;visibility:hidden;pointer-events:none}.arco-input-tag-input::-webkit-input-placeholder{color:var(--color-text-3)}.arco-input-tag-input::-moz-placeholder{color:var(--color-text-3)}.arco-input-tag-input::-ms-input-placeholder{color:var(--color-text-3)}.arco-input-tag-input::placeholder{color:var(--color-text-3)}.arco-input-tag-tag{max-width:100%;margin-right:4px;font-size:12px}.arco-input-tag-tag-ellipsis{font-size:12px;margin:0 4px}.arco-input-tag .arco-icon-hover{cursor:pointer}.arco-input-tag .arco-icon-hover.arco-icon-hover-disabled{cursor:not-allowed}.arco-input-tag:hover{background-color:var(--color-fill-3);border:1px solid transparent}.arco-input-tag.arco-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--primary-6));box-shadow:0 0 0 0 rgb(var(--primary-2))}.arco-input-tag .arco-input-tag-tag{color:var(--color-text-1);border-color:var(--color-fill-3);background-color:var(--color-bg-2)}.arco-input-tag .arco-icon-hover:hover::before{background-color:var(--color-fill-2)}.arco-input-tag.arco-input-tag-focus .arco-input-tag-tag{border-color:var(--color-fill-2);background-color:var(--color-fill-2)}.arco-input-tag.arco-input-tag-focus .arco-icon-hover:hover::before{background-color:var(--color-fill-3)}.arco-input-tag.arco-input-tag-disabled .arco-input-tag-tag{color:var(--color-text-4);border-color:var(--color-fill-3);background-color:var(--color-fill-2)}.arco-input-tag-warning{background-color:var(--color-warning-light-1);color:var(--color-text-1);border:1px solid transparent}.arco-input-tag-warning:hover{background-color:var(--color-warning-light-2);border:1px solid transparent}.arco-input-tag-warning.arco-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--warning-6));box-shadow:0 0 0 0 var(--color-warning-light-2)}.arco-input-tag-error{background-color:rgb(var(--danger-1));color:var(--color-text-1);border:1px solid transparent}.arco-input-tag-error:hover{background-color:rgb(var(--danger-2));border:1px solid transparent}.arco-input-tag-error.arco-input-tag-focus{background-color:var(--color-bg-2);border:1px solid rgb(var(--danger-6));box-shadow:0 0 0 0 rgb(var(--danger-2))}.arco-input-tag-disabled{background-color:var(--color-fill-2);color:var(--color-text-4);border:1px solid transparent;cursor:not-allowed}.arco-input-tag-disabled:hover{background-color:var(--color-fill-2);border:1px solid transparent}.arco-input-tag-disabled .arco-input-tag-input::-webkit-input-placeholder{color:var(--color-text-4)}.arco-input-tag-disabled .arco-input-tag-input::-moz-placeholder{color:var(--color-text-4)}.arco-input-tag-disabled .arco-input-tag-input::-ms-input-placeholder{color:var(--color-text-4)}.arco-input-tag-disabled .arco-input-tag-input::placeholder{color:var(--color-text-4)}.arco-input-tag-readonly{cursor:default}.arco-input-tag-wrapper{display:inline-flex;align-items:stretch;width:100%}.arco-input-tag-wrapper .arco-input-tag{min-width:0}.arco-input-tag-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.arco-input-tag-wrapper .arco-input-tag:not(.arco-input-tag-focused):not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.arco-input-tag-addafter,.arco-input-tag-addbefore{display:flex;align-items:center;padding:0 12px;color:var(--color-text-1);background-color:var(--color-fill-2);white-space:nowrap;border:1px solid transparent}.arco-input-tag-addbefore{border-right:1px solid var(--color-border-2);border-top-left-radius:var(--border-radius-small);border-bottom-left-radius:var(--border-radius-small)}.arco-input-tag-addafter{border-left:1px solid var(--color-border-2);border-top-right-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small)}.arco-input-tag-size-mini{font-size:12px}.arco-input-tag-size-mini .arco-input-tag-view{min-height:22px}.arco-input-tag-size-mini .arco-input-tag-tag,.arco-input-tag-size-mini .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.arco-input-tag-size-mini.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-mini.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:4px}.arco-input-tag-size-default{font-size:14px}.arco-input-tag-size-default .arco-input-tag-view{min-height:30px}.arco-input-tag-size-default .arco-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-input-tag-size-default .arco-input-tag-tag,.arco-input-tag-size-default .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:24px;line-height:22px}.arco-input-tag-size-default.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-default.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.arco-input-tag-size-small{font-size:14px}.arco-input-tag-size-small .arco-input-tag-view{min-height:26px}.arco-input-tag-size-small .arco-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-input-tag-size-small .arco-input-tag-tag,.arco-input-tag-size-small .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:20px;line-height:18px}.arco-input-tag-size-small.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-small.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:8px}.arco-input-tag-size-large{font-size:16px}.arco-input-tag-size-large .arco-input-tag-view{min-height:34px}.arco-input-tag-size-large .arco-input-tag-inner{padding-top:1px;padding-bottom:1px}.arco-input-tag-size-large .arco-input-tag-tag,.arco-input-tag-size-large .arco-input-tag-tag+.arco-input-tag-input{margin-top:1px;margin-bottom:1px;height:28px;line-height:26px}.arco-input-tag-size-large.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-size-large.arco-input-tag-has-placeholder input{box-sizing:border-box;padding-left:12px}.arco-input-tag-rtl{direction:rtl;padding-right:4px;padding-left:4px}.arco-input-tag-rtl .arco-input-tag-prefix{padding-right:8px;padding-left:4px}.arco-input-tag-rtl .arco-input-tag-suffix{padding-right:0;padding-left:8px}.arco-input-tag-rtl .arco-input-tag-tag{margin-right:0;margin-left:4px}.arco-input-tag-rtl .arco-input-tag-input-mirror{right:0;left:initial}.arco-input-tag-rtl.arco-input-tag-size-mini.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-mini.arco-input-tag-has-placeholder input{padding-right:4px}.arco-input-tag-rtl.arco-input-tag-size-default.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-default.arco-input-tag-has-placeholder input{padding-right:8px}.arco-input-tag-rtl.arco-input-tag-size-small.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-small.arco-input-tag-has-placeholder input{padding-right:8px}.arco-input-tag-rtl.arco-input-tag-size-large.arco-input-tag-has-placeholder .arco-input-tag-input-mirror,.arco-input-tag-rtl.arco-input-tag-size-large.arco-input-tag-has-placeholder input{padding-right:12px}.arco-input-tag-wrapper-rtl .arco-input-tag-addbefore{border-right:unset;border-left:1px solid var(--color-border-2)}.arco-input-tag-wrapper-rtl .arco-input-tag-addafter{border-left:unset;border-right:1px solid var(--color-border-2)}