vexip-ui/css/button.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-button-vars{--vxp-button-color:var(--vxp-content-color-base);--vxp-button-color-hover:var(--vxp-color-primary-light-2);--vxp-button-color-focus:var(--vxp-color-primary-light-2);--vxp-button-color-active:var(--vxp-color-primary-dark-1);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-fill-color-base);--vxp-button-bg-color-hover:var(--vxp-button-bg-color);--vxp-button-bg-color-focus:var(--vxp-button-bg-color);--vxp-button-bg-color-active:var(--vxp-button-bg-color);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-border-color-base);--vxp-button-b-color-hover:var(--vxp-color-primary-light-2);--vxp-button-b-color-focus:var(--vxp-color-primary-light-2);--vxp-button-b-color-active:var(--vxp-color-primary-dark-1);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1);--vxp-button-border:var(--vxp-border-shape) var(--vxp-button-b-color);--vxp-button-radius:var(--vxp-radius-base);--vxp-button-pulse-s-color:var(--vxp-color-primary-base);--vxp-button-pulse-opacity:60%;--vxp-button-pulse-size:6px;--vxp-button-pulse-duration:800ms;--vxp-button-pulse-timing:ease;--vxp-button-height:32px;--vxp-button-v-padding:0;--vxp-button-h-padding:14px;--vxp-button-font-size:var(--vxp-font-size-base);--vxp-button-series-span:8px;--vxp-button-icon-span:6px;--vxp-button-d-color-typed:rgba(255, 255, 255, 0.5);--vxp-button-badge-color:var(--vxp-color-white);--vxp-button-badge-bg-color:var(--vxp-color-error-base);--vxp-button-badge-b-color:var(--vxp-color-error-base)}.vxp-button{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative;display:inline-flex;align-items:center;justify-content:center;height:var(--vxp-button-height);padding:var(--vxp-button-v-padding) var(--vxp-button-h-padding);font-weight:400;line-height:1;color:var(--vxp-button-color);white-space:nowrap;vertical-align:middle;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;background-color:var(--vxp-button-bg-color);border:var(--vxp-button-border);border-radius:var(--vxp-button-radius);outline:0;transition:var(--vxp-transition-color),var(--vxp-transition-background),var(--vxp-transition-border),var(--vxp-transition-shadow)}.vxp-button,.vxp-button *,.vxp-button ::after,.vxp-button ::before{box-sizing:border-box}.vxp-button--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-button:hover{color:var(--vxp-button-color-hover);background-color:var(--vxp-button-bg-color-hover);border-color:var(--vxp-button-b-color-hover);outline:0}.vxp-button:focus{color:var(--vxp-button-color-focus);background-color:var(--vxp-button-bg-color-focus);border-color:var(--vxp-button-b-color-focus);outline:0}.vxp-button:active{color:var(--vxp-button-color-active);background-color:var(--vxp-button-bg-color-active);border-color:var(--vxp-button-b-color-active)}.vxp-button--disabled,.vxp-button--disabled.active,.vxp-button--disabled:active,.vxp-button--disabled:hover{color:var(--vxp-button-color-disabled);cursor:not-allowed;background-color:var(--vxp-button-bg-color-disabled);border-color:var(--vxp-button-b-color-disabled)}.vxp-button--block{display:flex;width:100%}.vxp-button:not(.vxp-button--block)+.vxp-button:not(.vxp-button--block){margin-inline-start:var(--vxp-button-series-span)}.vxp-button--small{--vxp-button-height:24px;--vxp-button-h-padding:10px}.vxp-button--large{--vxp-button-height:40px;--vxp-button-h-padding:20px}.vxp-button::after{position:absolute;inset:0;display:block;pointer-events:none;content:"";background-color:transparent;border-radius:inherit;animation-duration:var(--vxp-button-pulse-duration);animation-timing-function:var(--vxp-button-pulse-timing);animation-iteration-count:1}.vxp-button--pulsing::after{animation-name:vxp-button-pulse,vxp-button-pulse-opacity}@keyframes vxp-button-pulse{0%{box-shadow:0 0 1px 0 var(--vxp-button-pulse-s-color)}100%{box-shadow:0 0 1px var(--vxp-button-pulse-size) var(--vxp-button-pulse-s-color)}}@keyframes vxp-button-pulse-opacity{0%{opacity:var(--vxp-button-pulse-opacity)}100%{opacity:0}}.vxp-button--dashed{border-style:dashed}.vxp-button--dashed,.vxp-button--dashed.active,.vxp-button--dashed:active,.vxp-button--dashed:focus,.vxp-button--dashed:hover{background-color:transparent}.vxp-button--text{border-color:transparent}.vxp-button--text::after{display:none}.vxp-button--text,.vxp-button--text.active,.vxp-button--text:active,.vxp-button--text:focus,.vxp-button--text:hover{background-color:transparent;border-color:transparent}.vxp-button--ghost{--vxp-button-color:rgba(255, 255, 255, 0.8);--vxp-button-bg-color:transparent;--vxp-button-bg-color-hover:transparent;--vxp-button-bg-color-focus:transparent;--vxp-button-bg-color-active:transparent;--vxp-button-bg-color-disabled:transparent;--vxp-button-b-color:rgba(255, 255, 255, 0.6);--vxp-button-color-hover:var(--vxp-color-primary-base);--vxp-button-color-focus:var(--vxp-color-primary-base);--vxp-button-color-active:var(--vxp-color-primary-base);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-b-color-hover:var(--vxp-color-primary-base);--vxp-button-b-color-active:var(--vxp-color-primary-base);--vxp-button-b-color-disabled:var(--vxp-content-color-disabled)}.vxp-button--text.vxp-button--ghost{border-color:transparent}.vxp-button--primary{--vxp-button-color:var(--vxp-color-white);--vxp-button-color-hover:var(--vxp-color-white);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-primary-base);--vxp-button-bg-color-hover:var(--vxp-color-primary-light-2);--vxp-button-bg-color-focus:var(--vxp-color-primary-light-2);--vxp-button-bg-color-active:var(--vxp-color-primary-dark-1);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-primary-base);--vxp-button-b-color-hover:var(--vxp-color-primary-light-2);--vxp-button-b-color-focus:var(--vxp-color-primary-light-2);--vxp-button-b-color-active:var(--vxp-color-primary-dark-1);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1);--vxp-button-pulse-s-color:var(--vxp-color-primary-dark-1)}.vxp-button--primary.vxp-button--simple{--vxp-button-color:var(--vxp-color-primary-base);--vxp-button-color-hover:var(--vxp-color-primary-base);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-primary-opacity-8);--vxp-button-bg-color-hover:var(--vxp-color-primary-opacity-7);--vxp-button-bg-color-focus:var(--vxp-color-primary-opacity-3);--vxp-button-bg-color-active:var(--vxp-color-primary-opacity-3);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-primary-opacity-4);--vxp-button-b-color-hover:var(--vxp-color-primary-opacity-4);--vxp-button-b-color-focus:var(--vxp-color-primary-opacity-3);--vxp-button-b-color-active:var(--vxp-color-primary-opacity-3);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1)}.vxp-button--primary.vxp-button--ghost{--vxp-button-bg-color:transparent;--vxp-button-bg-color-hover:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-focus:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-active:rgba(255, 255, 255, 0.2);--vxp-button-bg-color-disabled:transparent;--vxp-button-color:var(--vxp-color-primary-base);--vxp-button-color-hover:var(--vxp-color-primary-base);--vxp-button-color-focus:var(--vxp-color-primary-base);--vxp-button-color-active:var(--vxp-color-primary-base);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-b-color-disabled:var(--vxp-content-color-disabled)}.vxp-button--primary.vxp-button--dashed,.vxp-button--primary.vxp-button--text{--vxp-button-color:var(--vxp-color-primary-base);--vxp-button-color-hover:var(--vxp-color-primary-light-2);--vxp-button-color-focus:var(--vxp-color-primary-light-2);--vxp-button-color-active:var(--vxp-color-primary-dark-1)}.vxp-button-group .vxp-button--primary:first-child{border-inline-end-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--primary:last-child{border-inline-start-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--primary:not(:first-child,:last-child){border-inline-color:var(--vxp-button-d-color-typed)}.vxp-button--info{--vxp-button-color:var(--vxp-color-white);--vxp-button-color-hover:var(--vxp-color-white);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-info-base);--vxp-button-bg-color-hover:var(--vxp-color-info-light-2);--vxp-button-bg-color-focus:var(--vxp-color-info-light-2);--vxp-button-bg-color-active:var(--vxp-color-info-dark-1);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-info-base);--vxp-button-b-color-hover:var(--vxp-color-info-light-2);--vxp-button-b-color-focus:var(--vxp-color-info-light-2);--vxp-button-b-color-active:var(--vxp-color-info-dark-1);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1);--vxp-button-pulse-s-color:var(--vxp-color-info-dark-1)}.vxp-button--info.vxp-button--simple{--vxp-button-color:var(--vxp-color-info-base);--vxp-button-color-hover:var(--vxp-color-info-base);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-info-opacity-8);--vxp-button-bg-color-hover:var(--vxp-color-info-opacity-7);--vxp-button-bg-color-focus:var(--vxp-color-info-opacity-3);--vxp-button-bg-color-active:var(--vxp-color-info-opacity-3);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-info-opacity-4);--vxp-button-b-color-hover:var(--vxp-color-info-opacity-4);--vxp-button-b-color-focus:var(--vxp-color-info-opacity-3);--vxp-button-b-color-active:var(--vxp-color-info-opacity-3);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1)}.vxp-button--info.vxp-button--ghost{--vxp-button-bg-color:transparent;--vxp-button-bg-color-hover:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-focus:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-active:rgba(255, 255, 255, 0.2);--vxp-button-bg-color-disabled:transparent;--vxp-button-color:var(--vxp-color-info-base);--vxp-button-color-hover:var(--vxp-color-info-base);--vxp-button-color-focus:var(--vxp-color-info-base);--vxp-button-color-active:var(--vxp-color-info-base);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-b-color-disabled:var(--vxp-content-color-disabled)}.vxp-button--info.vxp-button--dashed,.vxp-button--info.vxp-button--text{--vxp-button-color:var(--vxp-color-info-base);--vxp-button-color-hover:var(--vxp-color-info-light-2);--vxp-button-color-focus:var(--vxp-color-info-light-2);--vxp-button-color-active:var(--vxp-color-info-dark-1)}.vxp-button-group .vxp-button--info:first-child{border-inline-end-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--info:last-child{border-inline-start-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--info:not(:first-child,:last-child){border-inline-color:var(--vxp-button-d-color-typed)}.vxp-button--success{--vxp-button-color:var(--vxp-color-white);--vxp-button-color-hover:var(--vxp-color-white);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-success-base);--vxp-button-bg-color-hover:var(--vxp-color-success-light-2);--vxp-button-bg-color-focus:var(--vxp-color-success-light-2);--vxp-button-bg-color-active:var(--vxp-color-success-dark-1);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-success-base);--vxp-button-b-color-hover:var(--vxp-color-success-light-2);--vxp-button-b-color-focus:var(--vxp-color-success-light-2);--vxp-button-b-color-active:var(--vxp-color-success-dark-1);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1);--vxp-button-pulse-s-color:var(--vxp-color-success-dark-1)}.vxp-button--success.vxp-button--simple{--vxp-button-color:var(--vxp-color-success-base);--vxp-button-color-hover:var(--vxp-color-success-base);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-success-opacity-8);--vxp-button-bg-color-hover:var(--vxp-color-success-opacity-7);--vxp-button-bg-color-focus:var(--vxp-color-success-opacity-3);--vxp-button-bg-color-active:var(--vxp-color-success-opacity-3);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-success-opacity-4);--vxp-button-b-color-hover:var(--vxp-color-success-opacity-4);--vxp-button-b-color-focus:var(--vxp-color-success-opacity-3);--vxp-button-b-color-active:var(--vxp-color-success-opacity-3);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1)}.vxp-button--success.vxp-button--ghost{--vxp-button-bg-color:transparent;--vxp-button-bg-color-hover:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-focus:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-active:rgba(255, 255, 255, 0.2);--vxp-button-bg-color-disabled:transparent;--vxp-button-color:var(--vxp-color-success-base);--vxp-button-color-hover:var(--vxp-color-success-base);--vxp-button-color-focus:var(--vxp-color-success-base);--vxp-button-color-active:var(--vxp-color-success-base);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-b-color-disabled:var(--vxp-content-color-disabled)}.vxp-button--success.vxp-button--dashed,.vxp-button--success.vxp-button--text{--vxp-button-color:var(--vxp-color-success-base);--vxp-button-color-hover:var(--vxp-color-success-light-2);--vxp-button-color-focus:var(--vxp-color-success-light-2);--vxp-button-color-active:var(--vxp-color-success-dark-1)}.vxp-button-group .vxp-button--success:first-child{border-inline-end-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--success:last-child{border-inline-start-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--success:not(:first-child,:last-child){border-inline-color:var(--vxp-button-d-color-typed)}.vxp-button--warning{--vxp-button-color:var(--vxp-color-white);--vxp-button-color-hover:var(--vxp-color-white);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-warning-base);--vxp-button-bg-color-hover:var(--vxp-color-warning-light-2);--vxp-button-bg-color-focus:var(--vxp-color-warning-light-2);--vxp-button-bg-color-active:var(--vxp-color-warning-dark-1);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-warning-base);--vxp-button-b-color-hover:var(--vxp-color-warning-light-2);--vxp-button-b-color-focus:var(--vxp-color-warning-light-2);--vxp-button-b-color-active:var(--vxp-color-warning-dark-1);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1);--vxp-button-pulse-s-color:var(--vxp-color-warning-dark-1)}.vxp-button--warning.vxp-button--simple{--vxp-button-color:var(--vxp-color-warning-base);--vxp-button-color-hover:var(--vxp-color-warning-base);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-warning-opacity-8);--vxp-button-bg-color-hover:var(--vxp-color-warning-opacity-7);--vxp-button-bg-color-focus:var(--vxp-color-warning-opacity-3);--vxp-button-bg-color-active:var(--vxp-color-warning-opacity-3);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-warning-opacity-4);--vxp-button-b-color-hover:var(--vxp-color-warning-opacity-4);--vxp-button-b-color-focus:var(--vxp-color-warning-opacity-3);--vxp-button-b-color-active:var(--vxp-color-warning-opacity-3);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1)}.vxp-button--warning.vxp-button--ghost{--vxp-button-bg-color:transparent;--vxp-button-bg-color-hover:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-focus:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-active:rgba(255, 255, 255, 0.2);--vxp-button-bg-color-disabled:transparent;--vxp-button-color:var(--vxp-color-warning-base);--vxp-button-color-hover:var(--vxp-color-warning-base);--vxp-button-color-focus:var(--vxp-color-warning-base);--vxp-button-color-active:var(--vxp-color-warning-base);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-b-color-disabled:var(--vxp-content-color-disabled)}.vxp-button--warning.vxp-button--dashed,.vxp-button--warning.vxp-button--text{--vxp-button-color:var(--vxp-color-warning-base);--vxp-button-color-hover:var(--vxp-color-warning-light-2);--vxp-button-color-focus:var(--vxp-color-warning-light-2);--vxp-button-color-active:var(--vxp-color-warning-dark-1)}.vxp-button-group .vxp-button--warning:first-child{border-inline-end-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--warning:last-child{border-inline-start-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--warning:not(:first-child,:last-child){border-inline-color:var(--vxp-button-d-color-typed)}.vxp-button--error{--vxp-button-color:var(--vxp-color-white);--vxp-button-color-hover:var(--vxp-color-white);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-error-base);--vxp-button-bg-color-hover:var(--vxp-color-error-light-2);--vxp-button-bg-color-focus:var(--vxp-color-error-light-2);--vxp-button-bg-color-active:var(--vxp-color-error-dark-1);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-error-base);--vxp-button-b-color-hover:var(--vxp-color-error-light-2);--vxp-button-b-color-focus:var(--vxp-color-error-light-2);--vxp-button-b-color-active:var(--vxp-color-error-dark-1);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1);--vxp-button-pulse-s-color:var(--vxp-color-error-dark-1)}.vxp-button--error.vxp-button--simple{--vxp-button-color:var(--vxp-color-error-base);--vxp-button-color-hover:var(--vxp-color-error-base);--vxp-button-color-focus:var(--vxp-color-white);--vxp-button-color-active:var(--vxp-color-white);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-bg-color:var(--vxp-color-error-opacity-8);--vxp-button-bg-color-hover:var(--vxp-color-error-opacity-7);--vxp-button-bg-color-focus:var(--vxp-color-error-opacity-3);--vxp-button-bg-color-active:var(--vxp-color-error-opacity-3);--vxp-button-bg-color-disabled:var(--vxp-fill-color-background);--vxp-button-b-color:var(--vxp-color-error-opacity-4);--vxp-button-b-color-hover:var(--vxp-color-error-opacity-4);--vxp-button-b-color-focus:var(--vxp-color-error-opacity-3);--vxp-button-b-color-active:var(--vxp-color-error-opacity-3);--vxp-button-b-color-disabled:var(--vxp-border-color-light-1)}.vxp-button--error.vxp-button--ghost{--vxp-button-bg-color:transparent;--vxp-button-bg-color-hover:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-focus:rgba(255, 255, 255, 0.1);--vxp-button-bg-color-active:rgba(255, 255, 255, 0.2);--vxp-button-bg-color-disabled:transparent;--vxp-button-color:var(--vxp-color-error-base);--vxp-button-color-hover:var(--vxp-color-error-base);--vxp-button-color-focus:var(--vxp-color-error-base);--vxp-button-color-active:var(--vxp-color-error-base);--vxp-button-color-disabled:var(--vxp-content-color-disabled);--vxp-button-b-color-disabled:var(--vxp-content-color-disabled)}.vxp-button--error.vxp-button--dashed,.vxp-button--error.vxp-button--text{--vxp-button-color:var(--vxp-color-error-base);--vxp-button-color-hover:var(--vxp-color-error-light-2);--vxp-button-color-focus:var(--vxp-color-error-light-2);--vxp-button-color-active:var(--vxp-color-error-dark-1)}.vxp-button-group .vxp-button--error:first-child{border-inline-end-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--error:last-child{border-inline-start-color:var(--vxp-button-d-color-typed)}.vxp-button-group .vxp-button--error:not(:first-child,:last-child){border-inline-color:var(--vxp-button-d-color-typed)}.vxp-button--text.vxp-button--disabled,.vxp-button--text.vxp-button--disabled.active,.vxp-button--text.vxp-button--disabled:active,.vxp-button--text.vxp-button--disabled:hover{background-color:transparent;border-color:transparent}.vxp-button--circle{border-radius:var(--vxp-button-height)}.vxp-button--loading{position:relative;pointer-events:none;cursor:default}.vxp-button--loading::before{position:absolute;inset:-1px;z-index:1;pointer-events:none;content:"";background-color:var(--vxp-color-white);border-radius:inherit;opacity:25%;transition:var(--vxp-transition-opacity)}.vxp-button__icon{display:flex;align-items:center;margin-inline-end:var(--vxp-button-icon-span)}.vxp-button--icon-only{width:var(--vxp-button-height);padding:0}.vxp-button--icon-only .vxp-button__icon{margin:0}.vxp-button--icon-only.vxp-button--small{width:var(--vxp-button-height)}.vxp-button--icon-only.vxp-button--large{width:var(--vxp-button-height)}.vxp-button__badge{margin-inline-start:8px;pointer-events:none}.vxp-button__badge .vxp-badge__content{color:var(--vxp-button-badge-color);background-color:var(--vxp-button-badge-bg-color);box-shadow:var(--vxp-shadow-border) var(--vxp-button-badge-b-color)}.vxp-button__badge--primary{--vxp-button-badge-color:var(--vxp-button-bg-color);--vxp-button-badge-bg-color:var(--vxp-button-color);--vxp-button-badge-b-color:var(--vxp-button-color)}.vxp-button--ghost .vxp-button__badge--primary{--vxp-button-badge-color:var(--vxp-button-color);--vxp-button-badge-bg-color:var(--vxp-transparent)}.vxp-button--dashed .vxp-button__badge--primary,.vxp-button--simple .vxp-button__badge--primary,.vxp-button--text .vxp-button__badge--primary{--vxp-button-badge-color:var(--vxp-color-white)}.vxp-button__badge--info{--vxp-button-badge-color:var(--vxp-button-bg-color);--vxp-button-badge-bg-color:var(--vxp-button-color);--vxp-button-badge-b-color:var(--vxp-button-color)}.vxp-button--ghost .vxp-button__badge--info{--vxp-button-badge-color:var(--vxp-button-color);--vxp-button-badge-bg-color:var(--vxp-transparent)}.vxp-button--dashed .vxp-button__badge--info,.vxp-button--simple .vxp-button__badge--info,.vxp-button--text .vxp-button__badge--info{--vxp-button-badge-color:var(--vxp-color-white)}.vxp-button__badge--success{--vxp-button-badge-color:var(--vxp-button-bg-color);--vxp-button-badge-bg-color:var(--vxp-button-color);--vxp-button-badge-b-color:var(--vxp-button-color)}.vxp-button--ghost .vxp-button__badge--success{--vxp-button-badge-color:var(--vxp-button-color);--vxp-button-badge-bg-color:var(--vxp-transparent)}.vxp-button--dashed .vxp-button__badge--success,.vxp-button--simple .vxp-button__badge--success,.vxp-button--text .vxp-button__badge--success{--vxp-button-badge-color:var(--vxp-color-white)}.vxp-button__badge--warning{--vxp-button-badge-color:var(--vxp-button-bg-color);--vxp-button-badge-bg-color:var(--vxp-button-color);--vxp-button-badge-b-color:var(--vxp-button-color)}.vxp-button--ghost .vxp-button__badge--warning{--vxp-button-badge-color:var(--vxp-button-color);--vxp-button-badge-bg-color:var(--vxp-transparent)}.vxp-button--dashed .vxp-button__badge--warning,.vxp-button--simple .vxp-button__badge--warning,.vxp-button--text .vxp-button__badge--warning{--vxp-button-badge-color:var(--vxp-color-white)}.vxp-button__badge--error{--vxp-button-badge-color:var(--vxp-button-bg-color);--vxp-button-badge-bg-color:var(--vxp-button-color);--vxp-button-badge-b-color:var(--vxp-button-color)}.vxp-button--ghost .vxp-button__badge--error{--vxp-button-badge-color:var(--vxp-button-color);--vxp-button-badge-bg-color:var(--vxp-transparent)}.vxp-button--dashed .vxp-button__badge--error,.vxp-button--simple .vxp-button__badge--error,.vxp-button--text .vxp-button__badge--error{--vxp-button-badge-color:var(--vxp-color-white)}.vxp-button__badge--disabled .vxp-badge__content{--vxp-button-badge-color:var(--vxp-button-color-disabled);--vxp-button-badge-bg-color:var(--vxp-button-bg-color-disabled);--vxp-button-badge-b-color:var(--vxp-button-b-color-disabled)}.vxp-button-group{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:inline-flex;align-items:center}.vxp-button-group,.vxp-button-group *,.vxp-button-group ::after,.vxp-button-group ::before{box-sizing:border-box}.vxp-button-group--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-button-group .vxp-button{--vxp-button-series-span:0;border-radius:0}.vxp-button-group .vxp-button:focus,.vxp-button-group .vxp-button:hover{z-index:1}.vxp-button-group .vxp-button--active,.vxp-button-group .vxp-button:active{z-index:2}.vxp-button-group .vxp-button--first{margin-inline-end:0;border-start-start-radius:var(--vxp-button-radius);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-button-radius)}.vxp-button-group .vxp-button--last{margin-inline-end:0;border-start-start-radius:0;border-start-end-radius:var(--vxp-button-radius);border-end-end-radius:var(--vxp-button-radius);border-end-start-radius:0}.vxp-button-group .vxp-button:not(.vxp-button--last){margin-inline-end:-1px}.vxp-button-group .vxp-button--text{border-color:transparent}.vxp-button-group--circle .vxp-button--first{border-start-start-radius:var(--vxp-button-height);border-start-end-radius:0;border-end-end-radius:0;border-end-start-radius:var(--vxp-button-height)}.vxp-button-group--circle .vxp-button--last{border-start-start-radius:0;border-start-end-radius:var(--vxp-button-height);border-end-end-radius:var(--vxp-button-height);border-end-start-radius:0}