input{height:48px;border:2px solid var(--lightGrey);border-radius:8px;transition:border-color 80ms ease;background:var(--white);font-family:var(--font-family);padding-left:12px;padding-right:12px;font-size:16px;overflow-x:auto;&:focus{border-color:var(--night)}&:disabled{background:var(--extraLightGrey)}}#icon-container{position:relative;width:200px;height:200px;border-radius:12px;overflow:visible;align-self:center;border:1px solid var(--extraLightGrey);#icon-fallback{background-color:var(--extraLightGrey);padding:16px}#icon-fallback,#icon-preview{position:absolute;inset:0;border-radius:12px}#icon-preview{background-size:cover;background-position:50%;background-repeat:no-repeat}#icon-validator{position:fixed;top:-100px;left:-100px;width:1px;height:1px}}#loader{animation:spin 1s linear infinite}#clear-button{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;border:1px solid white;background-color:var(--black);color:var(--white);display:flex;align-items:center;justify-content:center}textarea{min-height:60px;overflow-y:auto;resize:vertical;max-height:200px;border:2px solid var(--lightGrey);border-radius:8px;transition:border-color 80ms ease;background:var(--white);font-family:var(--font-family);padding:8px 12px;field-sizing:content;font-size:16px;&:focus{border-color:var(--night)}&:disabled{background:var(--extraLightGrey)}}.step-bar{min-height:12px;flex-shrink:0;padding-top:8px;padding-bottom:8px;.bar{flex-grow:1;border-radius:4px;height:8px;background-color:var(--extraLightGrey);&[selected-=true]{background-color:var(--primary)}}}#floating-video-container{position:absolute;max-width:140px;bottom:calc(100% + 16px);right:16px;overflow:visible;border-radius:16px;outline:solid 4px var(--white);box-shadow:0 4px 16px rgba(0,0,0,.25);display:flex;cursor:pointer;#floating-video-thumbnail{aspect-ratio:16/9;background-image:url(/thumbnail.png);background-size:cover;background-position:50%;background-repeat:no-repeat;width:140px}&:focus,&:focus-within{outline:solid 2px var(--primary);outline-offset:2px}#play-button{position:absolute;z-index:1;top:50%;left:50%;transform:translate(-50%,-50%);padding-left:0;padding-right:0;width:32px;pointer-events:none}#floating-video-close-button{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;border:2px solid white;background-color:var(--black);color:var(--white);display:inline-flex;align-items:center;justify-content:center}}#fullscreen-player{position:fixed;width:100vw;max-width:100vw;left:50vw;right:0;top:50vh;transform:translateY(-50%) translateX(-50%);border:none!important;background:transparent;overflow-x:hidden;overflow-y:auto;max-height:100vh;outline:none;display:flex;flex-direction:column;align-items:center;padding:16px;#fullscreen-video{border-radius:20px;outline:solid 4px var(--white);max-height:80vh;width:auto;height:auto;object-fit:contain}}#fullscreen-player:not([open]){display:none}#fullscreen-player::backdrop{position:fixed;inset:0;display:grid;place-items:center;overflow:auto;background:var(--primary80);align-items:flex-end}#buttons{padding:16px;box-shadow:0 -8px 16px 0 rgba(0,0,0,.05);position:relative}.button{position:relative;display:inline-flex;gap:8px;justify-content:center;align-items:center;font-weight:500;border-radius:40px;border:none;text-decoration:none;cursor:pointer;transition:background-color .1s ease,filter .1s ease,opacity .1s ease;font-family:var(--font-family);&:disabled{pointer-events:none;opacity:.5}&[variant-=primary]{background:linear-gradient(to bottom,var(--white20),transparent),linear-gradient(to bottom,var(--primary),var(--primary));color:var(--white);&:hover{filter:brightness(1.25)}&:active{filter:brightness(1.5)}}&[variant-=secondary]{background:linear-gradient(to bottom,var(--white),var(--primary10)),linear-gradient(to bottom,var(--white),var(--white));box-shadow:0 0 0 .25px var(--lightGrey) inset;color:var(--primary);&:hover{filter:brightness(.95)}&:active{filter:brightness(.9)}}&[variant-=tertiary]{background:none;color:var(--primary);&:hover{background:var(--primary05)}&:active{background:var(--primary10)}}&[variant-=outline]{background:none;color:var(--primary);border:1.5px solid var(--primaryVeryLight);&:hover{background:var(--primary05)}&:active{background:var(--primary10)}}&[variant-=grey]{background-color:var(--extraLightGrey);color:var(--primary)}&[size-=md]{height:48px;padding:0 30px;font-size:14px}&[size-=sm]{height:32px;padding:0 26px;font-size:14px}&[size-=xs]{height:24px;padding:0 20px;font-size:12px}&[full-width-=true]{width:100%}}