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

button.m3.m3-fab {
  transition:
    background-color,
    box-shadow,
    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}
button.m3.m3-fab > span.m3-icon {
  font-family: Material-Symbols-Outlined-Regular, sans-serif;
}
button.m3.m3-fab.m3 {
  contain: content;
  box-sizing: border-box;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: none;
  gap: 12px;
}
button.m3.m3-fab::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.m3.m3-fab.surface {
  background-color: var(--md-sys-color-surface-container-high);
  color: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface:not(.without-elevation) {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.surface > svg.m3-svg-icon {
  fill: var(--md-sys-color-primary);
}
button.m3.m3-fab.surface > .m3.m3-ripple-domain > .m3.ripple {
  background: color-mix(in srgb, var(--md-sys-color-primary) 12%, transparent);
}
button.m3.m3-fab.primary {
  background-color: var(--md-sys-color-primary-container);
  color: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary:not(.without-elevation) {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.primary > svg.m3-svg-icon {
  fill: var(--md-sys-color-on-primary-container);
}
button.m3.m3-fab.primary > .m3.m3-ripple-domain > .m3.ripple {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-primary-container) 12%,
    transparent
  );
}
button.m3.m3-fab.secondary {
  background-color: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary:not(.without-elevation) {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.secondary > svg.m3-svg-icon {
  fill: var(--md-sys-color-on-secondary-container);
}
button.m3.m3-fab.secondary > .m3.m3-ripple-domain > .m3.ripple {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button.m3.m3-fab.tertiary {
  background-color: var(--md-sys-color-tertiary-container);
  color: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary:not(.without-elevation) {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px 3px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab.tertiary > svg.m3-svg-icon {
  fill: var(--md-sys-color-on-tertiary-container);
}
button.m3.m3-fab.tertiary > .m3.m3-ripple-domain > .m3.ripple {
  background: color-mix(
    in srgb,
    var(--md-sys-color-on-tertiary-container) 12%,
    transparent
  );
}
button.m3.m3-fab.m3-small-fab {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  padding: 11px;
  font-size: 24px;
}
button.m3.m3-fab.m3-default-fab {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  padding: 19px;
  font-size: 24px;
}
button.m3.m3-fab.m3-large-fab {
  width: 96px;
  height: 96px;
  border-radius: 28px;
  padding: 34.5px;
  font-size: 36px;
}
button.m3.m3-fab.m3-extended-fab {
  width: auto;
  height: 56px;
  border-radius: 16px;
  padding: 19px;
  font-size: 24px;
}
button.m3.m3-fab:not(.without-elevation):is(
    .surface,
    .primary,
    .secondary,
    .tertiary
  ):hover {
  box-shadow:
    0 2px 3px 0 rgba(0, 0, 0, 0.3),
    0 6px 10px 4px rgba(0, 0, 0, 0.15);
}
button.m3.m3-fab:not(.without-elevation):is(
    .surface,
    .primary,
    .secondary,
    .tertiary
  ):active {
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.3),
    0 4px 8px 3px rgba(0, 0, 0, 0.15) !important;
}
button.m3.m3-fab:hover.surface::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 8%,
    transparent
  );
}
button.m3.m3-fab:hover.primary::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary-container) 8%,
    transparent
  );
}
button.m3.m3-fab:hover.secondary::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 8%,
    transparent
  );
}
button.m3.m3-fab:hover.tertiary::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-tertiary-container) 8%,
    transparent
  );
}
button.m3.m3-fab:focus-visible.surface::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
button.m3.m3-fab:focus-visible.primary::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary-container) 12%,
    transparent
  );
}
button.m3.m3-fab:focus-visible.secondary::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button.m3.m3-fab:focus-visible.tertiary::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-tertiary-container) 12%,
    transparent
  );
}

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