@vue-material/core/dist/assets/button.css.js

Yet another 'Material Design Components' library for Vue3.

import i from "../attach-styles.js";
i('.md-button{--size: calc(var(--component-sm) * var(--scale));height:var(--size);padding-inline:calc(var(--md) * var(--scale))}.md-button.text{padding-inline:calc(var(--sm) * var(--scale))}.md-chip{--size: calc(var(--component-xs) * var(--scale));padding-inline:calc(var(--xs) * var(--scale))}.md-button,.md-chip{--scale: 1;--rounded: calc(var(--size) / 2);border:none;position:relative;height:var(--size);display:inline-flex;align-items:center;vertical-align:top;text-decoration:none;overflow:hidden;font:inherit;font-weight:500;cursor:pointer;transition:color .2s,background-color .2s,filter .2s,opacity .2s,box-shadow .2s}.md-button:after,.md-chip:after{content:"";inset:0;opacity:0;position:absolute;transition:opacity .2s;background:var(--on-surface)}.md-button:hover:after,.md-chip:hover:after{opacity:.08}.md-button.elevated,.md-chip.elevated{box-shadow:var(--shadow-1);background:var(--surface-container-low);color:var(--primary)}.md-button.filled,.md-chip.filled{background:var(--primary);color:var(--on-primary);--ripple-color: var(--primary-container)}.md-button.tonal,.md-chip.tonal{background:var(--secondary-container);color:var(--on-secondary-container)}.md-button.outlined,.md-chip.outlined{background:none;box-shadow:0 0 0 1px inset var(--outline);color:var(--primary)}.md-button.text,.md-chip.text{background:none;color:var(--primary)}.md-button-label,.md-chip-label{flex-grow:1;text-align:center;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-inline:calc(var(--xs) * var(--scale));font-size:calc(var(--font-sm) * var(--scale))}.md-button-icon,.md-chip-icon{display:grid;min-width:max-content;width:calc(var(--icon-md) * var(--scale));scale:var(--scale);place-items:center}.md-button-group,.md-chip-group{display:inline-flex;gap:calc(var(--xxs) / 2)}.md-button:disabled,.md-chip:disabled{opacity:.5;background:var(--surface-container);filter:grayscale(1);cursor:not-allowed}.md-button-group.span,.md-chip-group.span{flex-grow:1;width:100%}.md-button-group.span .md-button,.md-button-group.span .md-chip,.md-chip-group.span .md-button,.md-chip-group.span .md-chip{flex:1 1 auto}.md-button-group .md-button:not(:first-child,:last-child),.md-button-group .md-chip:not(:first-child,:last-child),.md-chip-group .md-button:not(:first-child,:last-child),.md-chip-group .md-chip:not(:first-child,:last-child){border-radius:var(--xxs)}.md-button-group .md-button:first-child:not(:last-child),.md-button-group .md-chip:first-child:not(:last-child),.md-chip-group .md-button:first-child:not(:last-child),.md-chip-group .md-chip:first-child:not(:last-child){border-top-right-radius:var(--xxs);border-bottom-right-radius:var(--xxs)}.md-button-group .md-button:last-child:not(:first-child),.md-button-group .md-chip:last-child:not(:first-child),.md-chip-group .md-button:last-child:not(:first-child),.md-chip-group .md-chip:last-child:not(:first-child){border-top-left-radius:var(--xxs);border-bottom-left-radius:var(--xxs)}', "5cb3f488");