git-tfs-id: [http://tfs.userrendszerhaz.hu:8080/tfs/DefaultCollection]$/MediaCube...
authorSweidan Omar <TFS\sweidan.omar>
Thu, 16 Dec 2021 15:44:25 +0000 (15:44 +0000)
committerSweidan Omar <TFS\sweidan.omar>
Thu, 16 Dec 2021 15:44:25 +0000 (15:44 +0000)
server/user.mediacube.gui/css/tagify.css

index b4f589b04218544086826bb137734dbe7a2bc850..6efa51375c3880287c5de4649e91c0120bfde983 100644 (file)
@@ -1 +1,529 @@
-:root{--tagify-dd-color-primary:rgb(53,149,246);--tagify-dd-bg-color:white}.tagify{--tags-border-color:#DDD;--tag-bg:#E5E5E5;--tag-hover:#D3E2E2;--tag-text-color:black;--tag-text-color--edit:black;--tag-pad:0.3em 0.5em;--tag-inset-shadow-size:1.1em;--tag-invalid-color:#D39494;--tag-invalid-bg:rgba(211, 148, 148, 0.5);--tag-remove-bg:rgba(211, 148, 148, 0.3);--tag-remove-btn-bg:none;--tag-remove-btn-bg--hover:#c77777;--tag--min-width:1ch;--tag--max-width:auto;--tag-hide-transition:.3s;--loader-size:.8em;display:flex;align-items:flex-start;flex-wrap:wrap;border:1px solid #ddd;border:1px solid var(--tags-border-color);padding:0;line-height:1.1;cursor:text;outline:0;position:relative;transition:.1s}@keyframes tags--bump{30%{transform:scale(1.2)}}@keyframes rotateLoader{to{transform:rotate(1turn)}}.tagify:hover{border-color:#ccc}.tagify.tagify--focus{transition:0s;border-color:#3595f6}.tagify[readonly]{cursor:default}.tagify[readonly]>.tagify__input{visibility:hidden;width:0;margin:5px 0}.tagify[readonly] .tagify__tag__removeBtn{display:none}.tagify[readonly] .tagify__tag>div{padding:.3em .5em;padding:var(--tag-pad)}.tagify[readonly] .tagify__tag>div::before{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}.tagify--loading .tagify__input::before{content:none}.tagify--loading .tagify__input::after{content:'';vertical-align:middle;margin:-2px 0 -2px .5em;opacity:1;width:.7em;height:.7em;width:var(--loader-size);height:var(--loader-size);border:3px solid;border-color:#eee #bbb #888 transparent;border-radius:50%;animation:rotateLoader .4s infinite linear}.tagify--loading .tagify__input:empty::after{margin-left:0}.tagify+input,.tagify+textarea{display:none!important}.tagify__tag{display:inline-flex;align-items:center;margin:5px 0 5px 5px;position:relative;z-index:1;outline:0;cursor:default;transition:.13s ease-out}.tagify__tag>div{vertical-align:top;box-sizing:border-box;max-width:100%;padding:.3em .5em;padding:var(--tag-pad);color:#000;color:var(--tag-text-color);line-height:inherit;border-radius:3px;-webkit-user-select:none;user-select:none;transition:.13s ease-out}.tagify__tag>div>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:top;min-width:var(--tag--min-width);max-width:var(--tag--max-width);transition:.8s ease,.1s color}.tagify__tag>div>[contenteditable]{outline:0;-webkit-user-select:text;user-select:text;cursor:text;margin:-2px;padding:2px;max-width:350px}.tagify__tag>div::before{content:'';position:absolute;border-radius:inherit;left:0;top:0;right:0;bottom:0;z-index:-1;pointer-events:none;transition:120ms ease;animation:tags--bump .3s ease-out 1;box-shadow:0 0 0 1.1em #e5e5e5 inset;box-shadow:0 0 0 calc(var(--tag-inset-shadow-size)) var(--tag-bg) inset}.tagify__tag:hover:not([readonly]) div::before{top:-2px;right:-2px;bottom:-2px;left:-2px;box-shadow:0 0 0 1.1em #d3e2e2 inset;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-hover) inset}.tagify__tag.tagify--noAnim{animation:none}.tagify__tag.tagify--hide{width:0!important;padding-left:0;padding-right:0;margin-left:0;margin-right:0;opacity:0;transform:scale(0);transition:.3s;transition:var(--tag-hide-transition);pointer-events:none}.tagify__tag.tagify--mark div::before{animation:none}.tagify__tag.tagify--notAllowed div>span{opacity:.5}.tagify__tag.tagify--notAllowed div::before{box-shadow:0 0 0 1.1em rgba(211,148,148,.5) inset!important;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-invalid-bg) inset!important;transition:.2s}.tagify__tag[readonly] .tagify__tag__removeBtn{display:none}.tagify__tag[readonly]>div::before{background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;box-shadow:none;filter:brightness(.95)}.tagify__tag--editable>div{color:#000;color:var(--tag-text-color--edit)}.tagify__tag--editable>div::before{box-shadow:0 0 0 2px #d3e2e2 inset!important;box-shadow:0 0 0 2px var(--tag-hover) inset!important}.tagify__tag--editable.tagify--invalid>div::before{box-shadow:0 0 0 2px #d39494 inset!important;box-shadow:0 0 0 2px var(--tag-invalid-color) inset!important}.tagify__tag__removeBtn{order:5;display:inline-flex;align-items:center;justify-content:center;border-radius:50px;cursor:pointer;font:14px Serif;background:0 0;background:var(--tag-remove-btn-bg);color:#000;color:var(--tag-text-color);width:14px;height:14px;margin-right:4.66667px;margin-left:-4.66667px;transition:.2s ease-out}.tagify__tag__removeBtn::after{content:"\00D7"}.tagify__tag__removeBtn:hover{color:#fff;background:#c77777;background:var(--tag-remove-btn-bg--hover)}.tagify__tag__removeBtn:hover+div>span{opacity:.5}.tagify__tag__removeBtn:hover+div::before{box-shadow:0 0 0 1.1em rgba(211,148,148,.3) inset!important;box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset!important;transition:.2s}.tagify:not(.tagify--mix) .tagify__input br{display:none}.tagify:not(.tagify--mix) .tagify__input *{display:inline;white-space:nowrap}.tagify__input{display:block;min-width:110px;margin:5px;padding:.3em .5em;padding:var(--tag-pad,.3em .5em);line-height:inherit;position:relative;white-space:pre-line}.tagify__input::before{display:inline-block;width:0}.tagify__input:empty::before{transition:.2s ease-out;opacity:.5;transform:none;width:auto}.tagify__input:focus{outline:0}.tagify__input:focus::before{transition:.2s ease-out;opacity:0;transform:translatex(6px)}@supports (-moz-appearance:none){.tagify__input:focus::before{display:none}}.tagify__input:focus:empty::before{transition:.2s ease-out;opacity:.3;transform:none}@supports (-moz-appearance:none){.tagify__input:focus:empty::before{display:inline-block}}.tagify__input::before{content:attr(data-placeholder);line-height:1.8;position:absolute;top:0;z-index:1;color:#000;white-space:nowrap;pointer-events:none;opacity:0}.tagify--mix .tagify__input::before{position:static;line-height:inherit}@supports (-moz-appearance:none){.tagify__input::before{line-height:inherit;position:relative}}.tagify__input::after{content:attr(data-suggest);display:inline-block;white-space:pre;color:#000;opacity:.3;pointer-events:none;max-width:100px}.tagify__input .tagify__tag{margin:0}.tagify__input .tagify__tag>div{padding-top:0;padding-bottom:0}.tagify--mix{line-height:1.7}.tagify--mix .tagify__input{padding:5px;margin:0;width:100%;height:100%;line-height:inherit}.tagify--mix .tagify__input::after{content:none}.tagify--select::after{content:'>';opacity:.5;position:absolute;top:50%;right:0;bottom:0;font:16px monospace;line-height:8px;height:8px;pointer-events:none;transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);transition:.2s ease-in-out}.tagify--select[aria-expanded=true]::after{transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)}.tagify--select .tagify__tag{position:absolute;top:0;right:1.8em;bottom:0}.tagify--select .tagify__tag div{display:none}.tagify--select .tagify__input{width:100%}.tagify--invalid{--tags-border-color:#D39494}.tagify__dropdown{position:absolute;z-index:9999;transform:translateY(1px);overflow:hidden}.tagify__dropdown[placement=top]{margin-top:0;transform:translateY(-2px)}.tagify__dropdown[placement=top] .tagify__dropdown__wrapper{border-top-width:1px;border-bottom-width:0}.tagify__dropdown--text{box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);font-size:.9em}.tagify__dropdown--text .tagify__dropdown__wrapper{border-width:1px}.tagify__dropdown__wrapper{max-height:300px;overflow:hidden;background:#fff;background:var(--tagify-dd-bg-color);border:1px solid #3595f6;border-color:var(--tagify-dd-color-primary);border-top-width:0;box-shadow:0 2px 4px -2px rgba(0,0,0,.2);transition:.25s cubic-bezier(0,1,.5,1)}.tagify__dropdown__wrapper:hover{overflow:auto}.tagify__dropdown--initial .tagify__dropdown__wrapper{max-height:20px;transform:translateY(-1em)}.tagify__dropdown--initial[placement=top] .tagify__dropdown__wrapper{transform:translateY(2em)}.tagify__dropdown__item{box-sizing:inherit;padding:.3em .5em;margin:1px;cursor:pointer;border-radius:2px;position:relative;outline:0}.tagify__dropdown__item--active{background:#3595f6;background:var(--tagify-dd-color-primary);color:#fff}.tagify__dropdown__item:active{filter:brightness(105%)}
\ No newline at end of file
+:root{\r
+       --tagify-dd-color-primary:rgb(53,149,246);\r
+       --tagify-dd-bg-color:white\r
+}\r
+\r
+.tagify{\r
+       --tags-border-color:#DDD;\r
+       --tag-bg:#E5E5E5;\r
+       --tag-hover:#D3E2E2;\r
+       --tag-text-color:black;\r
+       --tag-text-color--edit:black;\r
+       --tag-pad:0.3em 0.5em;\r
+       --tag-inset-shadow-size:1.1em;\r
+       --tag-invalid-color:#D39494;\r
+       --tag-invalid-bg:rgba(211, 148, 148, 0.5);\r
+       --tag-remove-bg:rgba(211, 148, 148, 0.3);\r
+       --tag-remove-btn-bg:none;\r
+       --tag-remove-btn-bg--hover:#c77777;\r
+       --tag--min-width:1ch;\r
+       --tag--max-width:auto;\r
+       --tag-hide-transition:.3s;\r
+       --loader-size:.8em;\r
+       display:flex;\r
+       align-items:flex-start;\r
+       flex-wrap:wrap;\r
+       border:1px solid #ddd;\r
+       border:1px solid var(--tags-border-color);\r
+       padding:0;\r
+       line-height:1.1;\r
+       cursor:text;\r
+       outline:0;\r
+       position:relative;\r
+       transition:.1s\r
+}\r
+\r
+@keyframes tags--bump{\r
+       30%{transform:scale(1.2)}\r
+}\r
+@keyframes rotateLoader{\r
+       to{transform:rotate(1turn)}\r
+}\r
+\r
+.tagify:hover{\r
+       border-color:#ccc\r
+}\r
+       \r
+.tagify.tagify--focus{\r
+       transition:0s;\r
+       border-color:#3595f6\r
+}\r
+\r
+.tagify[readonly]{\r
+       cursor:default\r
+}\r
+\r
+.tagify[readonly]>\r
+.tagify__input{\r
+       visibility:hidden;\r
+       width:0;\r
+       margin:5px 0\r
+}\r
+\r
+.tagify[readonly] \r
+.tagify__tag__removeBtn{\r
+       display:none\r
+}\r
+\r
+.tagify[readonly] \r
+.tagify__tag>div{\r
+       padding:.3em .5em;\r
+       padding:var(--tag-pad)\r
+}\r
+\r
+.tagify[readonly] \r
+.tagify__tag>div::before{\r
+       background:linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,\r
+               var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;\r
+       box-shadow:none;\r
+       filter:brightness(.95)\r
+}\r
+\r
+.tagify--loading \r
+.tagify__input::before{\r
+       content:none\r
+}\r
+\r
+.tagify--loading \r
+.tagify__input::after{\r
+       content:'';\r
+       vertical-align:middle;\r
+       margin:-2px 0 -2px .5em;\r
+       opacity:1;\r
+       width:.7em;\r
+       height:.7em;\r
+       width:var(--loader-size);\r
+       height:var(--loader-size);\r
+       border:3px solid;\r
+       border-color:#eee #bbb #888 transparent;\r
+       border-radius:50%;\r
+       animation:rotateLoader .4s infinite linear\r
+}\r
+\r
+.tagify--loading \r
+.tagify__input:empty::after{\r
+       margin-left:0\r
+}\r
+\r
+.tagify+input,\r
+       \r
+.tagify+textarea{\r
+       display:none!important\r
+}\r
+\r
+.tagify__tag{\r
+       display:inline-flex;\r
+       align-items:center;\r
+       margin:5px 0 5px 5px;\r
+       position:relative;\r
+       z-index:1;\r
+       outline:0;\r
+       cursor:default;\r
+       transition:.13s ease-out\r
+}\r
+\r
+.tagify__tag>div{\r
+       vertical-align:top;\r
+       box-sizing:border-box;\r
+       max-width:100%;\r
+       padding:.3em .5em;\r
+       padding:var(--tag-pad);\r
+       color:#000;\r
+       color:var(--tag-text-color);\r
+       line-height:inherit;\r
+       border-radius:3px;\r
+       -webkit-user-select:none;\r
+       user-select:none;\r
+       transition:.13s ease-out\r
+}\r
+\r
+.tagify__tag>div>*{\r
+       white-space:nowrap;\r
+       overflow:hidden;\r
+       text-overflow:ellipsis;\r
+       display:inline-block;\r
+       vertical-align:top;\r
+       min-width:var(--tag--min-width);\r
+       max-width:var(--tag--max-width);\r
+       transition:.8s ease,.1s color\r
+}\r
+\r
+.tagify__tag>div>[contenteditable]{\r
+       outline:0;\r
+       -webkit-user-select:text;\r
+       user-select:text;\r
+       cursor:text;\r
+       margin:-2px;\r
+       padding:2px;\r
+       max-width:350px\r
+}\r
+\r
+.tagify__tag>div::before{\r
+       content:'';\r
+       position:absolute;\r
+       border-radius:inherit;\r
+       left:0;top:0;\r
+       right:0;\r
+       bottom:0;\r
+       z-index:-1;\r
+       pointer-events:none;\r
+       transition:120ms ease;\r
+       animation:tags--bump .3s ease-out 1;\r
+       box-shadow:0 0 0 1.1em #e5e5e5 inset;\r
+       box-shadow:0 0 0 calc(var(--tag-inset-shadow-size)) var(--tag-bg) inset\r
+}\r
+\r
+.tagify__tag:hover:not([readonly]) \r
+div::before{\r
+       top:-2px;\r
+       right:-2px;\r
+       bottom:-2px;\r
+       left:-2px;\r
+       box-shadow:0 0 0 1.1em #d3e2e2 inset;\r
+       box-shadow:0 0 0 var(--tag-inset-shadow-size) var(--tag-hover) inset\r
+}\r
+\r
+.tagify__tag\r
+.tagify--noAnim{\r
+       animation:none\r
+}\r
+\r
+.tagify__tag\r
+.tagify--hide{\r
+       width: 0!important;\r
+       padding-left: 0;\r
+       padding-right: 0;\r
+       margin-left: 0;\r
+       margin-right: 0;\r
+       opacity: 0;\r
+       transform: scale(0);\r
+       transition: .3s;\r
+       transition: var(--tag-hide-transition);\r
+       pointer-events: none\r
+}\r
+\r
+.tagify__tag\r
+.tagify--mark div::before{\r
+       animation: none\r
+}\r
+\r
+.tagify__tag\r
+.tagify--notAllowed div>span{\r
+       opacity: .5\r
+}\r
+\r
+.tagify__tag\r
+.tagify--notAllowed div::before{\r
+       box-shadow: 0 0 0 1.1em rgba(211,148,148,.5) inset!important;\r
+       box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-invalid-bg) inset!important;\r
+       transition: .2s\r
+}\r
+       \r
+.tagify__tag[readonly] \r
+.tagify__tag__removeBtn{\r
+       display: none\r
+}\r
+\r
+.tagify__tag[readonly]>div::before{\r
+       background: linear-gradient(45deg,var(--tag-bg) 25%,transparent 25%,transparent 50%,var(--tag-bg) 50%,\r
+       var(--tag-bg) 75%,transparent 75%,transparent) 0/5px 5px;\r
+       box-shadow: none;\r
+       filter: brightness(.95)\r
+}\r
+\r
+.tagify__tag--editable>div{\r
+       color:#000;\r
+       color: var(--tag-text-color--edit)\r
+}\r
+\r
+.tagify__tag--editable>div::before{\r
+       box-shadow: 0 0 0 2px #d3e2e2 inset!important;\r
+       box-shadow: 0 0 0 2px var(--tag-hover) inset!important\r
+}\r
+\r
+.tagify__tag--editable\r
+.tagify--invalid>div::before{\r
+       box-shadow: 0 0 0 2px #d39494 inset!important;\r
+       box-shadow: 0 0 0 2px var(--tag-invalid-color) inset!important\r
+}\r
+\r
+.tagify__tag__removeBtn{\r
+       order:5;\r
+       display:inline-flex;\r
+       align-items: center;\r
+       justify-content: center;\r
+       border-radius: 50px;\r
+       cursor: pointer;\r
+       font: 14px Serif;\r
+       background: 0 0;\r
+       background: var(--tag-remove-btn-bg);\r
+       color:#000;\r
+       color: var(--tag-text-color);\r
+       width: 14px;\r
+       height: 14px;\r
+       margin-right: 4.66667px;\r
+       margin-left: -4.66667px;\r
+       transition: .2s ease-out\r
+}\r
+\r
+.tagify__tag__removeBtn::after{\r
+       content: "\00D7"\r
+}\r
+\r
+.tagify__tag__removeBtn:hover{\r
+       color:#fff;\r
+       background:#c77777;\r
+       background: var(--tag-remove-btn-bg--hover)\r
+}\r
+\r
+.tagify__tag__removeBtn:hover+div>span{\r
+       opacity:.5\r
+}\r
+\r
+.tagify__tag__removeBtn:hover+div::before{\r
+       box-shadow: 0 0 0 1.1em rgba(211,148,148,.3) inset!important;\r
+       box-shadow: 0 0 0 var(--tag-inset-shadow-size) var(--tag-remove-bg) inset!important;\r
+       transition: .2s\r
+}\r
+\r
+.tagify:not(.tagify--mix) \r
+.tagify__input br{\r
+       display:none\r
+}\r
+\r
+.tagify:not(.tagify--mix)\r
+.tagify__input *{\r
+       display: inline;\r
+       white-space: nowrap\r
+}\r
+       \r
+.tagify__input{\r
+       display: block;\r
+       min-width: 110px;\r
+       margin: 5px;\r
+       padding: .3em .5em;\r
+       padding: var(--tag-pad,.3em .5em);\r
+       line-height: inherit;\r
+       position: relative;\r
+       white-space: pre-line\r
+}\r
+\r
+.tagify__input::before{\r
+       display: inline-block;\r
+       width: 0\r
+}\r
+\r
+.tagify__input:empty::before{\r
+       transition: .2s ease-out;\r
+       opacity: .5;\r
+       transform: none;\r
+       width: auto\r
+}\r
+       \r
+.tagify__input:focus{\r
+       outline:0\r
+}\r
+\r
+.tagify__input:focus::before{\r
+       transition: .2s ease-out;\r
+       opacity: 0;\r
+       transform: translatex(6px)\r
+}\r
+\r
+@supports (-moz-appearance:none){\r
+       .tagify__input:focus::before{\r
+               display:none\r
+       }\r
+}\r
+\r
+.tagify__input:focus:empty::before{\r
+       transition:.2s ease-out;\r
+       opacity:.3;\r
+       transform:none\r
+}\r
+\r
+@supports (-moz-appearance:none){\r
+       .tagify__input:focus:empty::before{\r
+               display:inline-block\r
+       }\r
+}\r
+\r
+.tagify__input::before{\r
+       content:attr(data-placeholder);\r
+       line-height:1.8;\r
+       position:absolute;\r
+       top:0;\r
+       z-index:1;\r
+       color:#000;\r
+       white-space:nowrap;\r
+       pointer-events:none;\r
+       opacity:0\r
+}\r
+\r
+.tagify--mix\r
+.tagify__input::before{\r
+       position:static;\r
+       line-height:inherit\r
+}\r
+\r
+@supports (-moz-appearance:none){\r
+       .tagify__input::before{\r
+               line-height:inherit;\r
+               position:relative\r
+       }\r
+}\r
+\r
+.tagify__input::after{\r
+       content:attr(data-suggest);\r
+       display:inline-block;\r
+       white-space:pre;\r
+       color:#000;\r
+       opacity:.3;\r
+       pointer-events:none;\r
+       max-width:100px\r
+}\r
+\r
+.tagify__input\r
+.tagify__tag{\r
+       margin:0\r
+}\r
+\r
+.tagify__input\r
+.tagify__tag>div{\r
+       padding-top:0;\r
+       padding-bottom:0\r
+}\r
+       \r
+.tagify--mix{\r
+       line-height:1.7\r
+}\r
+\r
+.tagify--mix\r
+.tagify__input{\r
+       padding:5px;\r
+       margin:0;\r
+       width:100%;\r
+       height:100%;\r
+       line-height:inherit\r
+}\r
+\r
+.tagify--mix\r
+.tagify__input::after{\r
+       content:none\r
+}\r
+\r
+.tagify--select::after{\r
+       content:'>';\r
+       opacity:.5;\r
+       position:absolute;\r
+       top:50%;\r
+       right:0;\r
+       bottom:0;\r
+       font:16px monospace;\r
+       line-height:8px;\r
+       height:8px;\r
+       pointer-events:none;\r
+       transform:translate(-150%,-50%) scaleX(1.2) rotate(90deg);\r
+       transition:.2s ease-in-out\r
+}\r
+\r
+.tagify--select[aria-expanded=true]::after{\r
+       transform:translate(-150%,-50%) rotate(270deg) scaleY(1.2)\r
+}\r
+\r
+.tagify--select\r
+.tagify__tag{\r
+       position:absolute;\r
+       top:0;\r
+       right:1.8em;\r
+       bottom:0\r
+}\r
+\r
+.tagify--select\r
+.tagify__tag div{\r
+       display:none\r
+}\r
+\r
+.tagify--select \r
+.tagify__input{\r
+       width:100%\r
+}\r
+\r
+.tagify--invalid{\r
+       --tags-border-color:#D39494\r
+}\r
+       \r
+.tagify__dropdown{\r
+       position:absolute;\r
+       z-index:9999;\r
+       transform:translateY(1px);\r
+       overflow:hidden\r
+}\r
+       \r
+.tagify__dropdown[placement=top]{\r
+       margin-top:0;\r
+       transform:translateY(-2px)\r
+}\r
+       \r
+.tagify__dropdown[placement=top] \r
+.tagify__dropdown__wrapper{\r
+       border-top-width:1px;\r
+       border-bottom-width:0\r
+}\r
+       \r
+.tagify__dropdown--text{\r
+       box-shadow:0 0 0 3px rgba(var(--tagify-dd-color-primary),.1);\r
+       font-size:.9em\r
+}\r
+       \r
+.tagify__dropdown--text\r
+.tagify__dropdown__wrapper{\r
+       border-width:1px\r
+}\r
+\r
+.tagify__dropdown__wrapper{\r
+       max-height:300px;\r
+       overflow:hidden;\r
+       background:#fff;\r
+       background:var(--tagify-dd-bg-color);\r
+       border:1px solid #3595f6;\r
+       border-color:var(--tagify-dd-color-primary);\r
+       border-top-width:0;\r
+       box-shadow:0 2px 4px -2px rgba(0,0,0,.2);\r
+       transition:.25s cubic-bezier(0,1,.5,1)\r
+}\r
+\r
+.tagify__dropdown__wrapper:hover{\r
+       overflow:auto\r
+}\r
+       \r
+.tagify__dropdown--initial\r
+.tagify__dropdown__wrapper{\r
+       max-height:20px;\r
+       transform:translateY(-1em)\r
+}\r
+\r
+.tagify__dropdown--initial[placement=top]\r
+.tagify__dropdown__wrapper{\r
+       transform:translateY(2em)\r
+}\r
+\r
+.tagify__dropdown__item{\r
+       box-sizing:inherit;\r
+       padding:.3em .5em;\r
+       margin:1px;\r
+       cursor:pointer;\r
+       border-radius:2px;\r
+       position:relative;\r
+       outline:0\r
+}\r
+\r
+.tagify__dropdown__item--active{\r
+       background:#3595f6;\r
+       background:var(--tagify-dd-color-primary);\r
+       color:#fff\r
+}\r
+\r
+.tagify__dropdown__item:active{\r
+       filter:brightness(105%)\r
+}
\ No newline at end of file