:root{--s-signature-canvas-height:200px;--s-signature-canvas-bg:var(--s-white);--s-signature-full-bg:var(--s-fill-color-tertiary);--s-signature-full-gap:var(--s-size);--s-signature-side-width:52px}.dark{--s-signature-canvas-bg:var(--s-gray-900)}.s-signature__body{width:100%;height:var(--s-signature-canvas-height)}.s-signature__body canvas{width:100%;height:100%;background:var(--s-signature-canvas-bg)}.s-signature__footer{margin-top:10px}.s-signature__footer-content{display:flex;flex-direction:row}.s-signature__button-group{display:flex;margin-inline-start:auto;gap:10px}.s-signature__button-group .s-button{padding:0 16px}.s-signature--full{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--s-signature-full-bg);touch-action:none;display:flex;flex-direction:row-reverse;direction:ltr}.s-signature--full .s-signature__content{display:flex;flex-direction:row-reverse;flex:1;min-height:0;direction:ltr}.s-signature--full .s-signature__body{width:calc(100vw - var(--s-signature-side-width));height:100%;padding:calc(var(--s-signature-full-gap) + var(--s-status-bar-height)) var(--s-signature-full-gap) calc(var(--s-signature-full-gap) + var(--s-safe-bottom)) 0}.s-signature--full .s-signature__footer{position:relative;width:var(--s-signature-side-width);height:100%;margin-top:0}.s-signature--full .s-signature__footer-content{position:absolute;right:100%;bottom:0;width:100vh;height:var(--s-signature-side-width);padding-inline-start:calc(var(--s-signature-full-gap) + var(--s-status-bar-height));padding-inline-end:calc(var(--s-signature-full-gap) + var(--s-safe-bottom));align-items:center;transform-origin:right bottom;transform:rotate(90deg)}