.modal{align-items:center;background-color:#b0b0b0cc;display:flex;justify-content:center;inset:0;position:fixed;z-index:100}.modal .form{background-color:var(--color-2);border-radius:var(--radius-1);box-shadow:0 0 8px 0 var(--color-4);display:flex;flex-direction:column;margin:var(--gap-1);max-width:40rem;padding:var(--gap-1);width:100%}.modal .form .header{align-items:center;display:flex;font-size:1.1rem;font-weight:500;justify-content:space-between;margin-bottom:.5rem}.modal .form .header span{font-size:1.4rem}.modal .form .header span:hover{cursor:pointer;opacity:70%}.modal .form .body{display:flex;flex-direction:column;gap:var(--gap-1)}.modal .form .body .product{font-weight:600}.modal .form .body input,.modal .form .body textarea{border:.1rem solid var(--color-4);border-radius:.5rem;padding:.4rem;resize:vertical;width:100%}.modal .form .body input[invalid=true]{border-color:var(--color-1)}.modal .form .body textarea{border:.1rem solid var(--color-4);border-radius:.5rem;height:5rem;padding:.4rem;resize:none;width:100%}.modal .form .footer .button{background-color:var(--color-1);border-radius:.5rem;color:var(--color-2);margin-top:.5rem;padding:.5rem;text-align:center}.modal .form .footer .button:hover{cursor:pointer;opacity:70%}.modal .tip{bottom:0;bottom:var(--gap-1);position:absolute;right:0;transition:right .8s;width:12rem}.modal .tip .body{border-radius:var(--radius-1);padding:calc(var(--gap-1)/1.5);text-align:center;width:100%}.modal .tip[type=success] .body{background-color:var(--color-2);color:var(--color-3)}.modal .tip[type=error] .body{background-color:var(--color-2);color:var(--color-1)}.modal .tip[is-visible=true]{right:1rem}.modal .tip[is-visible=false]{right:-13rem}@media (width >= 48rem){.modal .form .header{font-size:1.3rem}.modal .form .header span{font-size:1.5rem}}