/* Interaction-only layer: resting colors, labels, fonts, borders and dimensions are inherited. */
:root {
  --mb-ease: cubic-bezier(.22, .8, .25, 1);
}

.mb-button.mb-position {
  position: relative;
}

.mb-button {
  translate: var(--mb-x, 0px) var(--mb-y, 0px);
  scale: 1;
  transition-property: translate, scale, border-color, background-color, box-shadow, color;
  transition-duration: 420ms, 140ms, 260ms, 260ms, 320ms, 260ms;
  transition-timing-function: var(--mb-ease);
}

.mb-button > .button-ripple {
  display: none !important;
}

.mb-sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 0;
  background: linear-gradient(105deg, transparent 10%, currentColor 49%, transparent 85%);
  clip-path: polygon(0 0, 35% 0, 10% 100%, 0 100%);
}

.mb-arrow {
  display: inline-block;
  translate: 0 0;
  transition: translate 380ms var(--mb-ease);
}

.mb-button.mb-pressed:not(:disabled):not([aria-disabled='true']) {
  scale: .975;
  transition-duration: 100ms;
}

.mb-roll-label {
  position: relative;
  display: inline-grid;
  overflow: hidden;
  vertical-align: bottom;
  line-height: inherit;
}

.mb-roll-front,
.mb-roll-back {
  display: block;
  transition: translate 420ms var(--mb-ease);
}

.mb-roll-front {
  translate: 0 0;
}

.mb-roll-back {
  position: absolute;
  inset: 0;
  translate: 0 115%;
  pointer-events: none;
}

@keyframes mb-highlight {
  0% {
    opacity: 0;
    clip-path: polygon(-50% 0, -15% 0, -50% 100%, -85% 100%);
  }
  18% { opacity: .11; }
  65% { opacity: .075; }
  100% {
    opacity: 0;
    clip-path: polygon(150% 0, 185% 0, 150% 100%, 115% 100%);
  }
}

@media (hover: hover) and (pointer: fine) {
  body:not(.mb-motion-off):not(.motion-paused) .mb-button.mb-pointer-hover:not(:disabled):not([aria-disabled='true']):hover > .mb-sheen {
    animation: mb-highlight 750ms var(--mb-ease) both;
  }

  body:not(.mb-motion-off):not(.motion-paused) .mb-button.mb-pointer-hover:not(:disabled):not([aria-disabled='true']):hover .mb-arrow {
    translate: 3px var(--mb-arrow-y, -2px);
  }

  body:not(.mb-motion-off):not(.motion-paused) .mb-roll-link.mb-pointer-hover:hover .mb-roll-front {
    translate: 0 -115%;
  }

  body:not(.mb-motion-off):not(.motion-paused) .mb-roll-link.mb-pointer-hover:hover .mb-roll-back {
    translate: 0 0;
  }
}

body:not(.mb-motion-off):not(.motion-paused) .mb-button:not(:disabled):not([aria-disabled='true']):focus-visible > .mb-sheen {
  animation: mb-highlight 750ms var(--mb-ease) both;
}

body:not(.mb-motion-off):not(.motion-paused) .mb-button:not(:disabled):not([aria-disabled='true']):focus-visible .mb-arrow {
  translate: 3px var(--mb-arrow-y, -2px);
}

body:not(.mb-motion-off):not(.motion-paused) .mb-roll-link:focus-visible .mb-roll-front {
  translate: 0 -115%;
}

body:not(.mb-motion-off):not(.motion-paused) .mb-roll-link:focus-visible .mb-roll-back {
  translate: 0 0;
}

.mb-motion-off .mb-button,
.motion-paused .mb-button {
  translate: 0 0 !important;
  scale: 1 !important;
  transition: none !important;
}

.mb-motion-off :is(.mb-sheen, .mb-arrow, .mb-roll-front, .mb-roll-back),
.motion-paused :is(.mb-sheen, .mb-arrow, .mb-roll-front, .mb-roll-back) {
  animation: none !important;
  transition: none !important;
}

.mb-motion-off :is(.mb-arrow, .mb-roll-front),
.motion-paused :is(.mb-arrow, .mb-roll-front) {
  translate: 0 0 !important;
}

.mb-motion-off .mb-roll-back,
.motion-paused .mb-roll-back {
  translate: 0 115% !important;
}

@media (prefers-reduced-motion: reduce) {
  .mb-button {
    translate: 0 0 !important;
    scale: 1 !important;
    transition: none !important;
  }

  .mb-sheen,
  .mb-arrow,
  .mb-roll-front,
  .mb-roll-back {
    animation: none !important;
    transition: none !important;
  }

  .mb-arrow,
  .mb-roll-front { translate: 0 0 !important; }
  .mb-roll-back { translate: 0 115% !important; }
}