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);
}

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