.pattern-button{background:var(--screen-shade);border:.5px solid var(--ui-border);height:5rem;overflow:hidden;padding:0;width:5rem}.pattern-button svg{display:block;height:5rem;position:relative;width:5rem;z-index:3}.pattern-button div{border-radius:3.5px;height:100%;overflow:hidden;position:relative;transform:translateY(-3px);width:100%;z-index:3}.pattern-button:before{background:var(--ui-border);border-radius:0 0 4px 4px;bottom:.5px;content:"";height:6px;left:.5px;position:absolute;right:.5px;top:auto;z-index:1;--pin:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='a' width='2' height='2' patternTransform='rotate(45)' patternUnits='userSpaceOnUse' viewBox='0 0 2 2'%3E%3Cpath fill='%23E1DACB' d='M0-.5v1h2v-1z'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3C/svg%3E");-webkit-mask-image:var(--pin);mask-image:var(--pin)}.pattern-button:after{background-color:var(--screen);border-radius:3.5px;bottom:3px;box-shadow:0 .5px var(--ui-border),0 1px 0 0 var(--screen-shade);content:"";left:0;position:absolute;right:0;top:0;z-index:2}.pattern-preview-inner{overflow:hidden}