@define-mixin button {

    /** 
     * https://caniuse.com/?search=fill-available
     * https://lists.w3.org/Archives/Public/www-style/2015Aug/0127.html 
     * https://caniuse.com/mdn-css_properties_width_stretch
     * autoprefix change this to -webkit-fill-available
    */
    width: stretch;

    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;

    text-align: center;
    text-decoration: none;

    vertical-align: middle;

    cursor: pointer;

    user-select: none;

    border-width: var(--monster-border-width);
    border-radius: var(--monster-border-radius);
    border-style: var(--monster-border-style);
    box-shadow: var(--monster-box-shadow-1);

    padding: .375rem .75rem;
    outline: none;

    background-position: center;

    position: relative;
    overflow: hidden;

    font-family: var(--monster-font-family);

    box-shadow: var(--monster-box-shadow-1);
    
    background-color: var(--monster-bg-color-primary-1);
    color: var(--monster-color-primary-1);

    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;

}