/* Web counterpart of AuriMaterial's AuriRecordButton. */
[data-keyboard-demo-shell] .keyboard-mic {
  position: relative;
  isolation: isolate;
  overflow: visible;
  color: #fff;
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgb(255 255 255 / 5.5%) 0 0.45px,
      rgb(0 0 0 / 4%) 0.65px 1px,
      transparent 1.2px 2px
    ),
    linear-gradient(
      to bottom,
      #e8ecef 0%,
      #9ca3ab 30%,
      #f5f8fa 47%,
      #7e848a 63%,
      #c4cad0 100%
    );
  border: 0;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgb(216 224 231 / 50%),
    inset 0 -1px 0 rgb(0 0 0 / 42%),
    0 2px 6px rgb(0 0 0 / 42%);
  animation: none;
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.32, 1.25),
    filter 220ms ease-out,
    box-shadow 240ms ease-out;
}

[data-keyboard-demo-shell] .keyboard-mic::before {
  position: absolute;
  z-index: -1;
  inset: max(4px, 13.5%);
  background: linear-gradient(to bottom, #b7443a, rgb(183 68 58 / 82%));
  border-radius: 50%;
  box-shadow:
    inset 0 2px 3px rgb(0 0 0 / 42%),
    inset 0 -1px 0 rgb(255 255 255 / 30%);
  content: "";
  transition: background 220ms ease-out;
}

[data-keyboard-demo-shell] .keyboard-mic:hover::before {
  background: linear-gradient(to bottom, #c85045, rgb(200 80 69 / 82%));
}

[data-keyboard-demo-shell] .keyboard-stage[data-theme="light"] .keyboard-mic {
  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgb(255 255 255 / 5.5%) 0 0.45px,
      rgb(0 0 0 / 4%) 0.65px 1px,
      transparent 1.2px 2px
    ),
    linear-gradient(
      to bottom,
      #d4d8db 0%,
      #8b9196 30%,
      #e5e9ec 47%,
      #71777c 63%,
      #adb2b6 100%
    );
  box-shadow:
    inset 0 1px 0 rgb(0 0 0 / 17%),
    inset 0 -1px 0 rgb(0 0 0 / 25%),
    0 2px 6px rgb(0 0 0 / 10%);
}

[data-keyboard-demo-shell] .keyboard-stage[data-theme="light"] .keyboard-mic::before {
  background: linear-gradient(to bottom, #99362e, rgb(153 54 46 / 82%));
}

[data-keyboard-demo-shell] .keyboard-stage[data-theme="light"] .keyboard-mic:hover::before {
  background: linear-gradient(to bottom, #b7443a, rgb(183 68 58 / 82%));
}

[data-keyboard-demo-shell] .keyboard-mic img.keyboard-mic-glyph {
  position: absolute;
  z-index: 1;
  inset: 30%;
  display: block;
  width: 40%;
  height: 40%;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 0.5px 1px rgb(0 0 0 / 28%));
  transition: opacity 240ms ease-out;
}

[data-keyboard-demo-shell] .keyboard-mic-glyph-live {
  opacity: 0;
}

[data-keyboard-demo-shell] .keyboard-mic[aria-pressed="true"] .keyboard-mic-glyph-rest {
  opacity: 0;
}

[data-keyboard-demo-shell] .keyboard-mic[aria-pressed="true"] .keyboard-mic-glyph-live {
  opacity: 1;
}

[data-keyboard-demo-shell] .keyboard-mic:active,
[data-keyboard-demo-shell] .keyboard-mic.is-tapped {
  filter: brightness(0.94);
  transform: scale(0.94);
}

[data-keyboard-demo-shell] .keyboard-stage[data-keyboard-state="listening"] .keyboard-mic {
  box-shadow:
    inset 0 1px 0 rgb(216 224 231 / 50%),
    inset 0 -1px 0 rgb(0 0 0 / 42%),
    0 0 0 3px rgb(200 80 69 / 55%),
    0 0 7px 4px rgb(200 80 69 / 24%),
    0 2px 6px rgb(0 0 0 / 42%);
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-keyboard-demo-shell] .keyboard-mic,
  [data-keyboard-demo-shell] .keyboard-mic::before,
  [data-keyboard-demo-shell] .keyboard-mic img.keyboard-mic-glyph {
    transition-duration: 100ms;
    transition-timing-function: linear;
  }
}