material-you-react/src/styles/button.css

button:not(.m3-fab, .m3-icon-button) {
  transition:
    background-color,
    box-shadow,
    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  font-family: var(--md-sys-typescale-label-large-font-family-name);
  font-size: var(--md-sys-typescale-label-large-font-size);
  font-weight: var(--md-sys-typescale-label-large-font-weight);
  line-height: var(--md-sys-typescale-label-large-line-height);
  box-sizing: border-box;
}
button:not(.m3-fab, .m3-icon-button).m3 {
  contain: content;
  box-sizing: border-box;
  border-radius: 100px;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 24px;
  border: none;
  gap: 8px;
}
button:not(.m3-fab, .m3-icon-button).filled {
  background-color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).filled,
button:not(.m3-fab, .m3-icon-button).filled > svg.m3-svg-icon {
  color: var(--md-sys-color-on-primary);
  fill: var(--md-sys-color-on-primary);
}
button:not(.m3-fab, .m3-icon-button).outlined {
  outline-offset: -1px;
  outline: 1px solid var(--md-sys-color-outline) !important;
  background-color: rgba(0, 0, 0, 0);
  color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).outlined > svg.m3-svg-icon {
  fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text {
  padding: 10px 12px !important;
  background-color: rgba(0, 0, 0, 0);
  color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).text > svg.m3-svg-icon {
  fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated {
  box-shadow:
    0 1px 3px 1px rgba(0, 0, 0, 0.15),
    0 1px 2px 0 rgba(0, 0, 0, 0.3);
  background-color: var(--md-sys-color-surface-container-low);
  color: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).elevated > svg.m3-svg-icon {
  fill: var(--md-sys-color-primary);
}
button:not(.m3-fab, .m3-icon-button).tonal {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button).tonal > svg.m3-svg-icon {
  fill: var(--md-sys-color-on-secondary-container);
}
button:not(.m3-fab, .m3-icon-button)::before {
  transition:
    background-color,
    box-shadow,
    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  content: "";
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0);
}
button:not(.m3-fab, .m3-icon-button).filled
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-primary) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):is(.outlined, .text, .elevated)
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button:not(.m3-fab, .m3-icon-button).tonal > .m3.m3-ripple-domain > .m3.ripple {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):active:is(.filled, .tonal) {
  box-shadow: none !important;
}
button:not(.m3-fab, .m3-icon-button):active.elevated {
  box-shadow:
    0 1px 3px 1px rgba(0, 0, 0, 0.15),
    0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}
button:not(.m3-fab, .m3-icon-button):active.tonal::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):focus-visible.outlined {
  border-color: var(--md-sys-color-primary) !important;
}
button:not(.m3-fab, .m3-icon-button):focus-visible.filled::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):focus-visible:is(
    .outlined,
    .text,
    .elevated
  )::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):focus-visible.tonal::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):hover:is(.filled, .tonal) {
  box-shadow:
    0 1px 3px 1px rgba(0, 0, 0, 0.15),
    0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
button:not(.m3-fab, .m3-icon-button):hover.elevated {
  box-shadow:
    0 2px 6px 2px rgba(0, 0, 0, 0.15),
    0 1px 2px 0 rgba(0, 0, 0, 0.3);
}
button:not(.m3-fab, .m3-icon-button):hover.filled::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary) 8%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):hover:is(
    .outlined,
    .text,
    .elevated
  )::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 8%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):hover.tonal::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 8%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):disabled {
  pointer-events: none;
}
button:not(.m3-fab, .m3-icon-button):disabled:is(
    .filled,
    .elevated,
    .tonal,
    .outlined,
    .text
  ) {
  color: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
button:not(.m3-fab, .m3-icon-button):disabled:is(.filled, .elevated, .tonal) {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 12%,
    transparent
  );
}
button:not(.m3-fab, .m3-icon-button):disabled.elevated {
  box-shadow: none;
}
button:not(.m3-fab, .m3-icon-button):disabled.outlined {
  outline: 1px solid
    color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent) !important;
}

/*# sourceMappingURL=button.css.map */