.button{--button-padding:0.9em;--button-icon-size:1.3em;position:relative;display:inline-block;margin:0;padding:var(--button-padding) calc(var(--button-padding) + .2em) var(--button-padding) calc(2 * var(--button-padding) + var(--button-icon-size));border-radius:.3em;border:0;background-color:var(--color-gr-98);color:var(--color-gr-20);font:inherit;font-size:.75em;font-weight:700;letter-spacing:.05em;line-height:1;text-decoration:none;text-transform:uppercase;cursor:default;transition-duration:.6s;transition-property:background-color,transform,box-shadow;will-change:transform;box-shadow:0 .2em .4em rgba(0,0,0,.36)}.button:hover{background-color:#fff;transform:scale(1.1);box-shadow:0 .4em .5em rgba(0,0,0,.27)}.button:active{background-color:var(--color-gr-93);transition-duration:0s;transform:scale(1);box-shadow:none}.button--dark{background-color:var(--color-gr-20);color:var(--color-gr-98)}.button--dark:hover{background-color:var(--color-gr-25)}.button--dark:active{background-color:var(--color-gr-14)}.button--vibrant{background-color:var(--color-co-1);color:var(--color-gr-20)}.button--vibrant:hover{background-color:var(--color-co-1-light)}.button--vibrant:active{background-color:var(--color-co-1-dark)}.button__icon{position:absolute;left:var(--button-padding);top:50%;width:var(--button-icon-size);height:var(--button-icon-size);transform:translateY(-50%)}