.tag-menu{display:flex;flex-direction:column;gap:20px;width:230px;padding:16px;border-radius:8px;position:absolute;top:-60px;left:105%;z-index:5;background-color:hsl(0,0%,12%);border:1px solid hsl(0,0%,21%);cursor:default;opacity:0;transform:translateY(-12px) scale(.97);pointer-events:none;transition:opacity .18s cubic-bezier(.03,.5,.5,1),transform .18s cubic-bezier(.03,.5,.5,1)}.tag-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.new-tag-menu-form{display:flex;flex-direction:column;gap:20px}.control{display:flex;align-items:center;gap:16px;font-size:16px;font-weight:300}.control.name input{width:100%;padding:6px 12px;background-color:hsl(0,0%,16%);outline:1px solid hsl(0,0%,21%);color:hsl(0,0%,90%);border-radius:4px;font-size:14px;box-sizing:border-box;transition:all .12s}.control.name input:focus{background-color:hsl(0,0%,20%);outline:2px solid hsl(0,0%,70%);color:hsl(0,0%,100%)}.control.icon-color-container{justify-content:space-between;gap:30px}.control.color,.control.icon{width:50%;justify-content:space-between}.control.color{padding-right:4px}.control.icon{gap:18px}.icon-menu{display:flex;flex-direction:column;gap:1rem;padding:.9rem .9rem .6rem;position:absolute;top:162px;left:2%;background-color:hsl(0,0%,14%);border-radius:8px;border:1px solid hsl(0,0%,27%);box-sizing:border-box;pointer-events:none;opacity:0;z-index:10;transform:translateY(-12px) scale(.97);transition:all .18s cubic-bezier(.03,.5,.5,1)}.icon-menu.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.icon-menu.new{top:66%;left:-70%}.icon-search{border-radius:4px;padding:4px 12px;width:100%;background-color:hsl(0,0%,20%)}.icon-search::placeholder{color:hsl(0,0%,60%)}.icon-grid{display:grid;grid-template-columns:repeat(5,48px);grid-gap:2px;gap:2px;padding-right:8px;grid-auto-rows:48px;height:calc(4 * 48px);min-width:263px;overflow-y:auto}.color-menu{display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);padding:16px;grid-gap:20px;gap:20px;border-radius:8px;position:absolute;top:164px;left:55%;background-color:hsl(0,0%,14%);border:1px solid hsl(0,0%,27%);box-sizing:border-box;opacity:0;z-index:10;transform:translateY(-12px) scale(.97);pointer-events:none;transition:opacity .18s cubic-bezier(.03,.5,.5,1),transform .18s cubic-bezier(.03,.5,.5,1)}.color-menu.new{top:166px}.color-menu.open{opacity:1;pointer-events:auto;transform:translateY(0) scale(1)}.menu-header{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:14px;font-weight:300;color:hsl(0,0%,70%);padding:0 0 4px;margin-top:-10px;border-bottom:1px solid hsl(0,0%,25%)}.menu-header svg{fill:hsl(0,0%,70%)}.dropdown-container .icon-button.delete{margin-right:0}.tag-menu.new .icon-button{padding:6px}.control.add-container{justify-content:space-between;height:32px}.icon-grid::-webkit-scrollbar{width:5px}.icon-grid::-webkit-scrollbar-thumb{background:hsl(0,0%,25%);border-radius:12px}.icon-grid::-webkit-scrollbar-track{background:none}.control.icon .icon-picker-btn{display:flex;align-items:center;justify-content:center;border-radius:3px;background-color:hsl(0,0%,15%);height:24px;width:24px;padding:2px;outline:2px solid hsl(0,0%,30%);outline-offset:2px;transition:all .25s}.control.icon .icon-picker-btn:hover,.dropdown-container .color-picker:hover{outline-color:hsl(0,0%,60%)}.dropdown-container .color-picker.selected{outline-color:hsl(0,0%,80%)}.dropdown-container .color-picker{height:20px;width:20px;padding:0;border-radius:4px;outline:2px solid hsl(0,0%,30%);outline-offset:3px}.new-tag-menu-form .add-button{display:flex;align-items:center;justify-content:center;width:72px;border-radius:4px;background-color:hsl(0,0%,25%);color:white;font-size:14px;height:auto;padding:6px 16px;transition:all .2s}.new-tag-menu-form .add-button:hover{background-color:hsl(0,0%,23%);color:hsl(0,0%,85%)}.new-tag-menu-form .add-button:active{background-color:hsl(0,0%,18%);color:white}.add-button:disabled{pointer-events:none;opacity:.8}.add-txt{transition:all .2s;opacity:1;translate:-10px}.add-txt.loading{opacity:0;translate:15px}.loader{width:12px;aspect-ratio:1/1;border:2px solid;border-color:#fff #fff transparent;border-radius:50%;display:inline-block;box-sizing:border-box;animation:rotation 1s linear infinite;transition:all .2s;translate:-10px;opacity:0}@keyframes rotation{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.loader.loading{opacity:1;translate:16px}.dropdown-container{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;position:relative}.dropdown-menu{display:flex;flex-direction:column;width:240px;padding:8px;border-radius:8px;margin-top:52px;background-color:hsl(0,0%,10%);outline:1px solid hsl(0,0%,20%);position:absolute;opacity:0;transform:translateY(-12px) scale(.97);pointer-events:none;transition:opacity .18s cubic-bezier(.03,.5,.5,1),transform .18s cubic-bezier(.03,.5,.5,1)}.dropdown-menu.open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}.dropdown-menu .menu-item-li{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;border-radius:4px;background-color:hsl(0,0%,10%);cursor:pointer;transition:all .3s ease}.dropdown-menu .menu-item-li.selected,.dropdown-menu .menu-item-li.selected:hover{background-color:hsl(0,0%,12%)}.dropdown-menu .menu-item-li:hover{background-color:hsl(0,0%,8%)}.dropdown-menu .menu-item-li:active{background-color:hsl(0,0%,5%)}.icon-menu-header{display:flex;gap:8px}.icon-button{display:flex;align-items:center;justify-content:center;border-radius:4px;background:none;padding:10px}.icon-button.icon-reset:disabled,.icon-button:disabled{cursor:not-allowed;pointer-events:none;opacity:.6}.icon-button.icon-reset:disabled{background:hsl(0,0%,20%)}.icon-button.icon-reset{background:hsl(0,0%,11%)}.icon-button.icon-reset:hover{background:hsl(0,0%,9%)}.icon-button.icon-reset:active{background:hsl(0,0%,7%)}.dropdown-menu .icon-button{height:40px;width:40px;padding:10px;align-items:center;justify-content:center}.dropdown-menu .icon-button.arrow{margin-right:8px}.dropdown-menu .icon-button:hover{background-color:hsl(0,0%,10%)}.arrow-right{fill:hsl(0,0%,70%);transition:all .2s}.icon-button.open .arrow-right{rotate:180deg}.dropdown-menu button{display:flex;justify-content:flex-start;align-items:center;padding:16px;gap:8px;width:100%;background:none;color:hsl(0,0%,70%);transition:all .25s ease;font-weight:300;font-size:16px}.menu-item-icon{height:20px}.dropdown-button{display:flex;align-items:center;padding:8px 10px 8px 16px;border-radius:100px;gap:6px;color:hsl(0,0%,65%);background:none;outline:1px solid hsl(0,0%,20%);outline-offset:3px;font-weight:300;-webkit-user-select:none;-moz-user-select:none;user-select:none;cursor:pointer;transition:all .15s linear}.dropdown-button.started{padding-right:16px}.dropdown-button.open{outline-color:hsl(0,0%,50%);background-color:hsl(0,0%,9%)}.dropdown-button.open:hover{background-color:hsl(0,0%,8%);outline-color:hsl(0,0%,40%)}.dropdown-button:hover{background-color:hsl(0,0%,9%);outline-color:hsl(0,0%,30%)}.dropdown-button:active{background-color:hsl(0,0%,6%)}.dropdown-button:disabled{pointer-events:none}.dropdown-button svg{transition:all .25s ease;height:16px;width:16px}.arrow-down.open{transform:rotate(180deg)}.error-message{display:end;font-size:12px;text-align:right;letter-spacing:.7px;color:#db5a42;margin-top:-36px;padding-right:4px;z-index:-1;opacity:0}.error-message,.error-message.new{font-weight:200;transition:all .25s}.error-message.new{text-align:left;width:100%;font-size:14px;letter-spacing:.73px;padding-right:0;margin-top:-24px}.error-message.visible{opacity:1;margin-top:-8px}.error-message.new.visible{margin-top:0}