:root{--success-color:#21a356;--error-color:#eb252f}#contact-form{display:flex;flex-direction:column;align-items:center;gap:2rem;width:100%;&>[data-form-message]{display:flex;flex-direction:column;gap:1rem;padding:1rem;width:100%;border:2px solid;border-radius:var(--border-radius);&[data-form-message="success"]{border-color:var(--success-color);color:var(--success-color)}&[data-form-message="error"]{border-color:var(--error-color);color:var(--error-color)}}&>.form-groups{display:flex;flex-direction:column;gap:1rem;width:100%;padding:2rem;background-color:var(--background-color-01);box-shadow:0 1px 6px rgb(0 0 0 / 20%);border-radius:var(--border-radius);&>.form-group{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;&>label{display:inline-flex;align-items:center;gap:.25rem;flex-wrap:wrap;color:var(--text-color);&.required>[data-text]::after{content:attr(data-text);padding:.125rem .375rem;background-color:var(--error-color);border-radius:var(--border-radius);line-height:1;color:#fff;white-space:pre-wrap}}&>:where(input,textarea){display:block;width:100%;padding:.75rem 1rem;background-color:#fff;border:1px solid var(--background-color-01);border-radius:var(--border-radius);&:user-invalid{border:1px solid var(--error-color)}}&>textarea{overflow-y:auto;resize:vertical;field-sizing:content;min-height:10rem;max-height:30rem}&>.error-message{color:var(--error-color)}}}&>.submit-wrapper{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;&>.button-wrapper{width:100%;max-width:min(30rem,100%);&>button{display:flex;justify-content:center;width:100%;padding:.5rem 1rem;background-color:var(--success-color);border-radius:var(--border-radius);font-size:1.125rem;color:#fff}}}&:has(:where(input,textarea):invalid)>.submit-wrapper{&>.button-wrapper{cursor:not-allowed;&>button{pointer-events:none;background-color:var(--background-color-01);color:color-mix(in srgb,var(--text-color) 25%,#ffffff)}}&>.spinner{visibility:hidden;display:inline-block;width:3rem;height:3rem;border-radius:50%;border:.25rem solid var(--background-color-01);border-top-color:var(--success-color);animation:spinner 1.5s linear infinite;&.is-active{visibility:visible}}}& .display-none{display:none}}@keyframes spinner{to{transform:rotate(360deg)}}@media screen and (max-width:599px){#contact-form{&>.form-groups{padding-block:1.5rem 2rem;padding-inline:1rem}}}