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

@import "./themes/tokens.css";
@import "./themes/colors.module.css";
@import "./themes/typography.module.css";
@import "./themes/theme.dark.css" (prefers-color-scheme: dark);
@import "./themes/theme.light.css" (prefers-color-scheme: light);
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
  );
}

svg.m3.m3-svg-icon > text {
  alignment-baseline: central;
  text-anchor: middle;
}
svg.m3.m3-svg-icon > text.m3-size-12px {
  width: 12px;
  aspect-ratio: 1;
  line-height: 12px;
  font-size: 12px;
}
svg.m3.m3-svg-icon > text.m3-size-16px {
  width: 16px;
  aspect-ratio: 1;
  line-height: 16px;
  font-size: 16px;
}
svg.m3.m3-svg-icon > text.m3-size-20px {
  width: 20px;
  aspect-ratio: 1;
  line-height: 20px;
  font-size: 20px;
}
svg.m3.m3-svg-icon > text.m3-size-24px {
  width: 24px;
  aspect-ratio: 1;
  line-height: 24px;
  font-size: 24px;
}
svg.m3.m3-svg-icon > text.m3-size-28px {
  width: 28px;
  aspect-ratio: 1;
  line-height: 28px;
  font-size: 28px;
}
svg.m3.m3-svg-icon > text.m3-size-32px {
  width: 32px;
  aspect-ratio: 1;
  line-height: 32px;
  font-size: 32px;
}
svg.m3.m3-svg-icon > text.m3-size-36px {
  width: 36px;
  aspect-ratio: 1;
  line-height: 36px;
  font-size: 36px;
}
svg.m3.m3-svg-icon > text.m3-size-40px {
  width: 40px;
  aspect-ratio: 1;
  line-height: 40px;
  font-size: 40px;
}
svg.m3.m3-svg-icon > text.m3-size-48px {
  width: 48px;
  aspect-ratio: 1;
  line-height: 48px;
  font-size: 48px;
}
svg.m3.m3-svg-icon > text.m3-Outlined {
  font-family: Material-Symbols-Outlined-Regular;
}
svg.m3.m3-svg-icon > text.m3-Rounded {
  font-family: Material-Symbols-Rounded-Regular;
}
svg.m3.m3-svg-icon > text.m3-Sharp {
  font-family: Material-Symbols-Sharp-Regular;
}

label.m3.m3-radio-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
label.m3.m3-radio-label > span.m3.m3-radio-state-layer {
  position: absolute;
  width: 2.5rem;
  aspect-ratio: inherit;
  border-radius: 50%;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

input[type="radio"].m3.m3-radio {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  width: 20px;
  margin: 0;
  aspect-ratio: inherit;
  border-radius: 50%;
  border: 2px solid var(--md-sys-color-on-surface-variant);
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="radio"].m3.m3-radio::after {
  content: "";
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
}
input[type="radio"].m3.m3-radio:disabled {
  border: 2px solid
    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type="radio"].m3.m3-radio:checked {
  border: 2px solid var(--md-sys-color-primary);
}
input[type="radio"].m3.m3-radio:checked::after {
  background-color: var(--md-sys-color-primary);
}
input[type="radio"].m3.m3-radio:checked:disabled {
  border: 2px solid
    color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
input[type="radio"].m3.m3-radio:checked:disabled::after {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 38%,
    transparent
  );
}
input[type="radio"].m3.m3-radio:not(:disabled):checked:hover
  + span.m3.m3-radio-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 8%,
    transparent
  );
}
input[type="radio"].m3.m3-radio:not(:disabled):is(
    :checked:active,
    :indeterminate:active
  )
  + span.m3.m3-radio-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
input[type="radio"].m3.m3-radio:not(:disabled):is(
    :checked:active,
    :indeterminate:active
  )
  + span.m3.m3-radio-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 20%,
    transparent
  );
}
input[type="radio"].m3.m3-radio:not(:disabled):hover
  + span.m3.m3-radio-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 8%,
    transparent
  );
}
input[type="radio"].m3.m3-radio:not(:disabled):active
  + span.m3.m3-radio-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 12%,
    transparent
  );
}
input[type="radio"].m3.m3-radio:not(:disabled):active
  + span.m3.m3-radio-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 20%,
    transparent
  );
}

svg.m3.m3-badge {
  position: absolute;
  background-color: var(--md-sys-color-error);
}
svg.m3.m3-badge.disable-value {
  padding: 0;
  height: 6px;
  width: 6px;
  border-radius: 3px;
}
svg.m3.m3-badge.disable-value > text {
  display: none;
}
svg.m3.m3-badge {
  border-radius: 8px;
  height: 16px;
}
svg.m3.m3-badge > text {
  fill: var(--md-sys-color-on-error);
  font-size: var(--md-sys-typescale-label-small-font-size);
  font-weight: var(--md-sys-typescale-label-small-font-weight);
  line-height: var(--md-sys-typescale-label-small-line-height);
  font-optical-sizing: none;
  alignment-baseline: central;
  text-anchor: middle;
  display: flex;
  align-items: center;
  justify-content: center;
}

@font-face {
  font-family: Material-Symbols-Rounded-Regular;
  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].ttf");
  src: url("./font/MaterialSymbolsRounded[FILL,GRAD,opsz,wght].woff2")
    format("woff2");
}
@font-face {
  font-family: Material-Symbols-Outlined-Regular;
  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].ttf");
  src: url("./font/MaterialSymbolsOutlined[FILL,GRAD,opsz,wght].woff2")
    format("woff2");
}
@font-face {
  font-family: Material-Symbols-Sharp-Regular;
  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].ttf");
  src: url("./font/MaterialSymbolsSharp[FILL,GRAD,opsz,wght].woff2")
    format("woff2");
}
@font-face {
  font-family: Roboto;
  font-face-name: Thin;
  font-weight: 100;
  src: url("./font/Roboto-Thin.ttf");
}
@font-face {
  font-family: Roboto;
  font-face-name: Light;
  font-weight: 300;
  src: url("./font/Roboto-Light.ttf");
}
@font-face {
  font-family: Roboto;
  font-face-name: Regular;
  font-weight: 400;
  src: url("./font/Roboto-Regular.ttf");
}
@font-face {
  font-family: Roboto;
  font-face-name: Medium;
  font-weight: 500;
  src: url("./font/Roboto-Medium.ttf");
}
@font-face {
  font-family: Roboto;
  font-face-name: Bold;
  font-weight: 700;
  src: url("./font/Roboto-Bold.ttf");
}
@font-face {
  font-family: Roboto;
  font-face-name: Black;
  font-weight: 900;
  src: url("./font/Roboto-Black.ttf");
}
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;
}

.m3.m3-ripple-domain {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

.m3.ripple {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  transform-origin: center;
  opacity: 0;
  z-index: 20;
  aspect-ratio: 1;
  border-radius: 50%;
  animation-name: rippleAppearanceAnimation;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-duration: 0.55s;
  transition:
    opacity,
    background,
    background-color,
    0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.m3.ripple.visible {
  opacity: 1 !important;
}

@keyframes rippleAppearanceAnimation {
  0% {
    transform: scale3d(0, 0, 0);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}
div.m3.m3-switch-exp {
  margin: 4px;
  box-sizing: content-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 32px;
}
div.m3.m3-switch-exp > svg {
  overflow: visible;
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  width: 52px;
  height: 32px;
}
div.m3.m3-switch-exp > svg > g {
  transform: translate(11.5%, 81%);
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
div.m3.m3-switch-exp > svg > g > text {
  font-family: Material-Symbols-Outlined-Regular;
  font-size: 20px;
}
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer,
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
  transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cy: 50%;
  cx: 16px;
}
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler-state-layer {
  r: 20px;
  fill-opacity: 0;
}
div.m3.m3-switch-exp > svg > circle.m3.m3-switch-handler {
  r: 8px;
}
div.m3.m3-switch-exp > svg > rect.m3.m3-switch-track {
  transition: fill 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  stroke-width: 2px;
  border-radius: 16px;
  rx: 15px;
  width: 50px;
  height: 30px;
}
div.m3.m3-switch-exp > input.m3 {
  cursor: pointer;
  appearance: none;
  opacity: 0 !important;
  margin: 0;
  width: 52px;
  height: 32px;
  position: absolute;
}
div.m3.m3-switch-exp > input.m3:disabled {
  cursor: not-allowed;
}
div.m3.m3-switch-exp
  > input.m3:not(:checked, :disabled)
  + svg
  > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-outline);
}
div.m3.m3-switch-exp > input.m3:checked:not(:disabled) + svg > g {
  transform: translate(50%, 81%);
}
div.m3.m3-switch-exp
  > input.m3:checked:not(:disabled)
  + svg
  > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch-exp
  > input.m3:not(:disabled)
  + svg
  > g
  > text.m3.m3-icon-unchecked {
  fill: var(--md-sys-color-on-primary);
}
div.m3.m3-switch-exp
  > input.m3:not(:disabled)
  + svg
  > g
  > text.m3.m3-icon-checked {
  fill: var(--md-sys-color-on-primary-container);
}
div.m3.m3-switch-exp
  > input.m3:checked:disabled
  + svg
  > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-surface);
}
div.m3.m3-switch-exp > input.m3:checked + svg > circle.m3.m3-switch-handler,
div.m3.m3-switch-exp
  > input.m3
  + svg:has(text.m3.m3-icon-unchecked)
  > circle.m3.m3-switch-handler {
  r: 12px;
}
div.m3.m3-switch-exp > input.m3:checked + svg > g > text.m3.m3-icon-unchecked {
  opacity: 0;
}
div.m3.m3-switch-exp
  > input.m3:checked
  + svg
  > circle.m3:is(.m3-switch-handler, .m3-switch-handler-state-layer) {
  cx: calc(100% - 16px);
}
div.m3.m3-switch-exp
  > input.m3:not(:checked)
  + svg
  > g
  > text.m3.m3-icon-checked {
  opacity: 0;
}
div.m3.m3-switch-exp
  > input.m3:is(
    div.m3.m3-switch-exp > input.m3:checked,
    div.m3.m3-switch-exp > input.m3
  ):not(:disabled):active
  + svg
  > circle.m3.m3-switch-handler {
  r: 14px;
}
div.m3.m3-switch-exp
  > input.m3:not(:checked):disabled
  + svg
  > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 38%;
}
div.m3.m3-switch-exp
  > input.m3:hover:not(:disabled):checked
  + svg
  > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-primary-container);
}
div.m3.m3-switch-exp
  > input.m3:hover:not(:disabled):checked
  + svg
  > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-primary);
  fill-opacity: 8%;
}
div.m3.m3-switch-exp
  > input.m3:hover:not(:disabled):not(:checked)
  + svg
  > circle.m3.m3-switch-handler {
  fill: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-switch-exp
  > input.m3:hover:not(:disabled):not(:checked)
  + svg
  > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 8%;
}
div.m3.m3-switch-exp
  > input.m3:active:not(:disabled):checked
  + svg
  > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-primary);
  fill-opacity: 12%;
}
div.m3.m3-switch-exp
  > input.m3:active:not(:disabled):not(:checked)
  + svg
  > circle.m3.m3-switch-handler-state-layer {
  fill: var(--md-sys-color-on-surface);
  fill-opacity: 12%;
}
div.m3.m3-switch-exp
  > input.m3:is(:checked, :checked:disabled)
  + svg
  > rect.m3.m3-switch-track {
  rx: 16px;
  width: 52px;
  height: 32px;
  stroke-width: 0;
}
div.m3.m3-switch-exp
  > input.m3:is(
    div.m3.m3-switch-exp > input.m3:not(:checked),
    div.m3.m3-switch-exp > input.m3:not(:checked):disabled
  )
  + svg
  > rect.m3.m3-switch-track {
  x: 1px;
  y: 1px;
}
div.m3.m3-switch-exp > input.m3:not(:checked) + svg > rect.m3.m3-switch-track {
  stroke: var(--md-sys-color-outline);
  fill: var(--md-sys-color-surface-container-highest);
}
div.m3.m3-switch-exp > input.m3:checked + svg > rect.m3.m3-switch-track {
  stroke: var(--md-sys-color-primary);
  fill: var(--md-sys-color-primary);
}
div.m3.m3-switch-exp > input.m3:disabled + svg > g > text.m3 {
  fill: color-mix(
    in srgb,
    var(--md-sys-color-surface-container-highest) 38%,
    transparent
  );
}
div.m3.m3-switch-exp > input.m3:disabled + svg > rect.m3.m3-switch-track {
  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
  fill: color-mix(
    in srgb,
    var(--md-sys-color-surface-variant) 12%,
    transparent
  );
}
div.m3.m3-switch-exp > input.m3:checked:disabled + svg > g > text.m3 {
  transform: translateX(38.5%);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
}
div.m3.m3-switch-exp
  > input.m3:checked:disabled
  + svg
  > rect.m3.m3-switch-track {
  stroke: color-mix(in srgb, var(--md-sys-color-on-surface) 0%, transparent);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 12%, transparent);
}

hr.m3.m3-divider {
  display: flex;
  align-items: end;
  box-sizing: border-box;
  border: none;
  outline: 0.5px solid var(--md-sys-color-outline-variant);
  margin: 4px;
}
hr.m3.m3-divider.vertical {
  writing-mode: tb-rl;
}
hr.m3.m3-divider.vertical,
hr.m3.m3-divider.vertical.full-width {
  height: 100%;
}
hr.m3.m3-divider.vertical.inset {
  align-self: end;
  height: calc(100% - 16px);
}
hr.m3.m3-divider.vertical.middle-inset {
  height: calc(100% - 32px);
}
hr.m3.m3-divider.horizontal,
hr.m3.m3-divider.horizontal.full-width {
  width: 100%;
}
hr.m3.m3-divider.horizontal.inset {
  align-self: end;
  width: calc(100% - 16px);
}
hr.m3.m3-divider.horizontal.middle-inset {
  width: calc(100% - 32px);
}

label.m3.m3-checkbox-label {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}
label.m3.m3-checkbox-label > span.m3.m3-checkbox-state-layer {
  position: absolute;
  width: 2.5rem;
  aspect-ratio: inherit;
  border-radius: 50%;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}

span.m3.m3-checkbox-ripple-layer {
  z-index: 20;
  contain: content;
  border-radius: 50%;
  position: absolute;
  width: 2.5rem;
  height: 2.5rem;
}

input[type="checkbox"].m3.m3-checkbox {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: content-box;
  z-index: 10;
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  outline-offset: -0.14rem;
  border-radius: 0.14rem;
  outline: 0.14rem solid var(--md-sys-color-on-surface-variant);
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
input[type="checkbox"].m3.m3-checkbox:is(
    :user-invalid:is(:checked, :indeterminate),
    .m3.m3-error:is(:checked, :indeterminate)
  ) {
  outline-color: var(--md-sys-color-error);
  background-color: var(--md-sys-color-error);
}
input[type="checkbox"].m3.m3-checkbox:is(.m3.m3-error, :user-invalid) {
  outline-color: var(--md-sys-color-error);
}
input[type="checkbox"].m3.m3-checkbox:is(
    :checked:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
        .m3.m3-error,
        :disabled
      ),
    :indeterminate:is(:hover, input[type="checkbox"].m3.m3-checkbox):not(
        .m3.m3-error,
        :disabled
      )
  ) {
  outline-color: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-primary);
}
input[type="checkbox"].m3.m3-checkbox:disabled:is(
    :hover,
    input[type="checkbox"].m3.m3-checkbox:disabled
  ) {
  opacity: 38%;
  border: 2px solid var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox:disabled:checked:is(
    :hover,
    input[type="checkbox"].m3.m3-checkbox:disabled
  ) {
  opacity: 38%;
  background-color: var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox::after {
  line-height: 1.125rem;
  font-family: Material-Symbols-Outlined-Regular, sans-serif;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--md-sys-color-on-primary);
}
input[type="checkbox"].m3.m3-checkbox:checked::after {
  content: "done";
}
input[type="checkbox"].m3.m3-checkbox:indeterminate::after {
  content: "check_indeterminate_small";
}
input[type="checkbox"].m3.m3-checkbox:hover {
  outline-color: var(--md-sys-color-on-surface);
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :user-invalid:is(:hover, :indeterminate:hover),
    .m3.m3-error:hover
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-error) 8%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :user-invalid:is(:active, :indeterminate:active),
    .m3.m3-error:active
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-error) 12%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :user-invalid:is(:active, :indeterminate:active),
    .m3.m3-error:active
  )
  + span.m3.m3-checkbox-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-error) 20%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :checked:hover,
    :indeterminate:hover
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 8%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :checked:active,
    :indeterminate:active
  )
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):is(
    :checked:active,
    :indeterminate:active
  )
  + span.m3.m3-checkbox-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 20%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):hover
  + span.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 8%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
  + span.m3.m3-checkbox-state-layer {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 12%,
    transparent
  );
}
input[type="checkbox"].m3.m3-checkbox:not(:disabled):active
  + span.m3.m3-checkbox-state-layer
  + span.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 20%,
    transparent
  );
}

div.m3.m3-text-field {
  position: relative;
  display: flex;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
  margin: 0;
}
div.m3.m3-text-field span.m3-icon.icon-before {
  align-self: start;
}
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder,
div.m3.m3-text-field > input,
div.m3.m3-text-field > label {
  line-height: var(--md-sys-typescale-body-large-line-height);
  font-size: var(--md-sys-typescale-body-large-font-size);
}
div.m3.m3-text-field + span.m3-text-field-supporting-text {
  display: flex;
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-size: var(--md-sys-typescale-body-small-font-size);
  color: var(--md-sys-color-on-surface-variant);
  margin: 4px 16px 2px 16px;
}
div.m3.m3-text-field > label {
  padding-inline: 4px;
  pointer-events: none;
  transform: translate(16px, 0);
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  position: absolute;
}
div.m3.m3-text-field > input {
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  background-color: transparent;
  border: none;
}
div.m3.m3-text-field > span.m3-icon {
  position: absolute;
  align-self: end;
  margin: 12px;
  width: 24px;
  line-height: 24px;
  font-size: 24px;
  display: inherit;
  align-items: center;
  justify-content: inherit;
  cursor: pointer;
  color: var(--md-sys-color-on-surface-variant);
  font-family: Material-Symbols-Outlined-Regular, serif;
}
div.m3.m3-text-field > span.m3-text-field-state-layer {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
}
div.m3.m3-text-field > input,
div.m3.m3-text-field > label {
  color: var(--md-sys-color-on-surface);
}
div.m3.m3-text-field:is(.filled, .outlined) > input::placeholder {
  color: var(--md-sys-color-on-surface-variant);
}
div.m3.m3-text-field:is(.filled, .outlined) > input:focus-visible {
  outline: none;
  caret-color: var(--md-sys-color-primary);
}
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled) > *,
div.m3.m3-text-field:is(.filled, .outlined):has(input:disabled)
  + span.m3-text-field-supporting-text {
  opacity: 38%;
}
div.m3.m3-text-field.filled {
  contain: content;
  border-radius: 4px 4px 0 0;
}
div.m3.m3-text-field.filled > input {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px 4px 0 0;
  background-color: var(--md-sys-color-surface-container-highest);
  box-shadow: inset 0 -1px 0 var(--md-sys-color-on-surface-variant);
}
div.m3.m3-text-field.filled > input.with-after-icon {
  padding: 24px 48px 8px 16px;
}
div.m3.m3-text-field.filled > input.with-before-icon {
  padding: 24px 16px 8px 48px;
}
div.m3.m3-text-field.filled > input.with-before-icon + label {
  margin-left: 32px;
}
div.m3.m3-text-field.filled > input:not(.with-after-icon, .with-before-icon) {
  padding: 24px 16px 8px;
}
div.m3.m3-text-field.filled > input.with-after-icon.with-before-icon {
  padding: 24px 48px 8px 48px;
}
div.m3.m3-text-field.filled > label.raised {
  transform: translate(12px, -12px);
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
  caret-color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:required:user-invalid:focus-visible {
  box-shadow: inset 0 -3px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:required:user-invalid {
  box-shadow: inset 0 -1px 0 var(--md-sys-color-error);
}
div.m3.m3-text-field.filled:has(input:required:user-invalid)
  > *:not(input):nth-last-child(-n + 3),
div.m3.m3-text-field.filled:has(input:required:user-invalid)
  + span.m3-text-field-supporting-text {
  color: var(--md-sys-color-error);
}
div.m3.m3-text-field.filled > input:focus-visible {
  outline-offset: 3px;
  box-shadow: inset 0 -3px 0 var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled > input:focus-visible + label {
  color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.filled:hover
  > input:not(:disabled)
  ~ span.m3-text-field-state-layer {
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 8%,
    transparent
  );
}
div.m3.m3-text-field.outlined > fieldset {
  margin: 0;
  position: absolute;
  border-radius: 4px;
  pointer-events: none;
  padding-inline: 12px;
  border: 1px solid var(--md-sys-color-outline);
  inset: -7.5px 0px 0px 0px;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-text-field.outlined > fieldset > legend > span {
  width: 100%;
}
div.m3.m3-text-field.outlined > fieldset > legend {
  opacity: 0;
  width: 0;
  padding: 0;
  pointer-events: none;
  border: 0 solid transparent;
  transition: 0.05s cubic-bezier(0.2, 0, 0, 1);
}
div.m3.m3-text-field.outlined > fieldset > legend.raised {
  border-inline-width: 6px;
  border-style: solid;
  border-color: transparent;
  width: auto;
  visibility: visible;
}
div.m3.m3-text-field.outlined > input {
  box-sizing: border-box;
  border-radius: 4px;
}
div.m3.m3-text-field.outlined > input.with-after-icon {
  padding: 16px 48px 16px 16px;
}
div.m3.m3-text-field.outlined > input.with-before-icon {
  padding: 16px 16px 16px 48px;
}
div.m3.m3-text-field.outlined > input.with-before-icon + label {
  transform: translate(48px, 0);
}
div.m3.m3-text-field.outlined > input:not(.with-after-icon, .with-before-icon) {
  padding: 16px;
}
div.m3.m3-text-field.outlined > input.with-after-icon.with-before-icon {
  padding: 16px 48px;
}
div.m3.m3-text-field.outlined:has(input:focus-visible) > fieldset {
  border: 3px solid var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined:not(
    div.m3.m3-text-field.outlined:has(label.raised)
  ):has(input:focus-visible)
  > fieldset
  > legend {
  border-top-width: 0;
  border-bottom-width: 0;
  border-inline-width: 5.5px;
  border-style: solid;
  border-color: transparent;
}
div.m3.m3-text-field.outlined:not(
    div.m3.m3-text-field.outlined:has(input:focus-visible)
  ):has(label.raised)
  > fieldset
  > legend {
  border-top-width: 0;
  border-bottom-width: 0;
  border-inline-width: 7.5px;
  border-style: solid;
  border-color: transparent;
}
div.m3.m3-text-field.outlined > input:focus-visible + label {
  color: var(--md-sys-color-primary);
}
div.m3.m3-text-field.outlined > label.raised,
div.m3.m3-text-field.outlined > fieldset > * {
  line-height: var(--md-sys-typescale-body-small-line-height);
  font-size: var(--md-sys-typescale-body-small-font-size);
}
div.m3.m3-text-field.outlined > label.raised {
  transform: translate(16px, -27px) !important;
}
div.m3.m3-text-field.outlined > input:required:user-invalid {
  caret-color: var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
  > *:not(input):nth-last-child(-n + 3),
div.m3.m3-text-field.outlined:has(input:required:user-invalid)
  + span.m3-text-field-supporting-text {
  color: var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(input:required:user-invalid) > fieldset {
  border: 3px solid var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:has(
    input:required:user-invalid:not(:focus-visible)
  )
  > fieldset {
  border: 1px solid var(--md-sys-color-error);
}
div.m3.m3-text-field.outlined:hover:not(
    div.m3.m3-text-field.outlined:hover:has(
        input:disabled,
        input:focus-visible,
        label.raised,
        input:required:user-invalid
      )
  )
  > fieldset {
  transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  border-color: var(--md-sys-color-on-surface);
}

button.m3.m3-icon-button {
  transition:
    background-color,
    box-shadow,
    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  contain: content;
  border-radius: 50%;
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border: none;
  padding: 0;
}
button.m3.m3-icon-button::before {
  transition:
    background-color,
    box-shadow,
    0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
}
button.m3.m3-icon-button > span.m3-icon {
  z-index: 25;
  font-size: 2em;
  font-variation-settings:
    "FILL" 0,
    "wght" 500,
    "GRAD" 0,
    "opsz" 48;
}
button.m3.m3-icon-button.default {
  fill: var(--md-sys-color-on-surface-variant);
  background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default:disabled,
button.m3.m3-icon-button.default.selected:disabled,
button.m3.m3-icon-button.default.selected.toggled:disabled {
  fill: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 38%,
    transparent
  );
  background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.default.selected.toggled {
  fill: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled {
  fill: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.filled.toggled {
  fill: var(--md-sys-color-primary);
  background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.filled.selected.toggled {
  fill: var(--md-sys-color-on-primary);
  background-color: var(--md-sys-color-primary);
}
button.m3.m3-icon-button.tonal.toggled {
  fill: var(--md-sys-color-on-surface-variant);
  background-color: var(--md-sys-color-surface-container-highest);
}
button.m3.m3-icon-button.tonal.selected.toggled,
button.m3.m3-icon-button.tonal {
  fill: var(--md-sys-color-on-secondary-container);
  background-color: var(--md-sys-color-secondary-container);
}
button.m3.m3-icon-button:is(.tonal, .filled, .toggled.selected):disabled {
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 12%,
    transparent
  );
}
button.m3.m3-icon-button.outlined {
  border: 1px solid var(--md-sys-color-outline);
  fill: var(--md-sys-color-on-surface-variant);
  background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined:disabled {
  border: 1px solid
    color-mix(in srgb, var(--md-sys-color-outline) 12%, transparent);
  fill: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 38%,
    transparent
  );
  background-color: rgba(0, 0, 0, 0);
}
button.m3.m3-icon-button.outlined.toggled.selected:disabled {
  border: 1px solid
    color-mix(in srgb, var(--md-sys-color-outline) 0%, transparent);
  fill: color-mix(in srgb, var(--md-sys-color-on-surface) 38%, transparent);
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface) 12%,
    transparent
  );
}
button.m3.m3-icon-button.outlined.selected.toggled {
  border: 1px solid rgba(0, 0, 0, 0);
  background-color: var(--md-sys-color-inverse-surface);
  fill: var(--md-sys-color-inverse-on-surface);
}
button.m3.m3-icon-button.filled:not(:disabled)
  > .m3.m3-ripple-domain
  > .m3.ripple,
button.m3.m3-icon-button.filled:not(:disabled).selected.toggled
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary) 12%,
    transparent
  );
}
button.m3.m3-icon-button.filled:not(:disabled).toggled
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled)
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 12%,
    transparent
  );
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
    .outlined
  ).toggled.selected
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
button.m3.m3-icon-button:is(.outlined, .default):not(:disabled):not(
    .default
  ).toggled.selected
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-inverse-on-surface) 12%,
    transparent
  );
}
button.m3.m3-icon-button.tonal:not(:disabled)
  > .m3.m3-ripple-domain
  > .m3.ripple,
button.m3.m3-icon-button.tonal:not(:disabled).selected.toggled
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button.m3.m3-icon-button.tonal:not(:disabled).toggled
  > .m3.m3-ripple-domain
  > .m3.ripple {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 12%,
    transparent
  );
}
button.m3.m3-icon-button:hover:not(:disabled):is(.default, .outlined)::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 8%,
    transparent
  );
}
button.m3.m3-icon-button:hover:not(:disabled).filled::before,
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled.selected::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary) 8%,
    transparent
  );
}
button.m3.m3-icon-button:hover:not(:disabled).filled.toggled::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 8%,
    transparent
  );
}
button.m3.m3-icon-button:hover:not(:disabled).tonal::before,
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled.selected::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 8%,
    transparent
  );
}
button.m3.m3-icon-button:hover:not(:disabled).tonal.toggled::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 8%,
    transparent
  );
}
button.m3.m3-icon-button:focus-visible:not(:disabled):is(
    .default,
    .outlined
  )::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 12%,
    transparent
  );
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled::before,
button.m3.m3-icon-button:focus-visible:not(
    :disabled
  ).filled.toggled.selected::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-primary) 12%,
    transparent
  );
}
button.m3.m3-icon-button:focus-visible:not(:disabled).filled.toggled::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-primary) 12%,
    transparent
  );
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal::before,
button.m3.m3-icon-button:focus-visible:not(
    :disabled
  ).tonal.toggled.selected::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-secondary-container) 12%,
    transparent
  );
}
button.m3.m3-icon-button:focus-visible:not(:disabled).tonal.toggled::before {
  background-color: color-mix(
    in srgb,
    var(--md-sys-color-on-surface-variant) 12%,
    transparent
  );
}

html {
  font-family: Roboto, serif;
  color: var(--md-sys-color-on-surface);
  background-color: var(--md-sys-color-surface-container);
}

.m3 {
  user-select: none;
}

.m3.m3-wrapper {
  width: 100%;
  background-color: var(--md-sys-color-surface);
  border-radius: 25px;
  padding: 25px;
  display: flex;
  align-items: center;
  flex-direction: column;
  height: min-content;
}

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