/* Generated from ui/styles/button-motion.css. Edit the source, then npm run build:styles. */
.button-fill {
  background-color: var(--fill-base) !important;
  background-image: linear-gradient(var(--fill-color), var(--fill-color)) !important;
  background-repeat: no-repeat !important;
  background-position: left center !important;
  background-size: 0% 100% !important;
  color: var(--fill-ink) !important;
  transition: background-size .36s cubic-bezier(.2,.7,.2,1), border-color .2s ease !important;
}
@media (hover: hover) {
  .button-fill:hover:not(:disabled):not([aria-disabled="true"]) { background-size: 100% 100% !important; }
}
.button-fill:focus-visible:not(:disabled) { background-size: 100% 100% !important; }
@media (prefers-reduced-motion: reduce) {
  .button-fill { transition: none !important; }
}



.button-sweep, .button-sweep:hover { position: relative; isolation: isolate; overflow: hidden; border: 0 !important; background: var(--ui-color-ink) !important; color: white !important; box-shadow: var(--ui-shadow-none) !important; }
.button-sweep__layer { position: absolute; inset: 0; z-index: -1; background: white; transform: translateX(-101%); pointer-events: none; }
.button-sweep__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-8); color: white; mix-blend-mode: difference; }

.button-fill--left { background-position: right center !important; }

.button-sweep--inverse, .button-sweep--inverse:hover { background: var(--ui-color-white) !important; }
.button-sweep--inverse .button-sweep__layer { background: #000; }
.button-fill:hover:not(:disabled), .button-fill:focus-visible:not(:disabled) { color: white !important; }