:root{--color-gray:#8c97b7;--color-blue:#1c38f1;--color-green:#1fcdb0;--input-height:3rem}body{align-items:center;background-color:#f9fbff;display:flex;justify-content:center}.ui-form{grid-column-gap:1rem;--color:var(--color-gray);background:#fff;border-radius:.25rem;box-shadow:0 .5rem 1rem #0003;display:grid;grid-template-areas:"input button";grid-template-columns:1fr auto;grid-template-rows:1fr;padding:1rem}.ui-form:focus-within{--color:var(--color-blue)}.ui-input{border:2px solid var(--color);border-radius:.25rem;grid-area:input;outline:none;transition-property:border-color}.ui-button,.ui-input{height:var(--input-height);padding:0 1rem;transition-duration:.3s}.ui-button{background-color:var(--color);border:none;border-radius:.25rem;color:#fff;font-weight:700;grid-area:button;transition-delay:.2s;transition-property:background-color,opacity,transform}.ui-button:hover{opacity:.8}.ui-button:active{transform:translateY(10%)}[data-show]:not([data-active]){display:none}.ui-form{overflow:hidden}