// ------------------------------------------------------------------------------
// <auto-generated>
//     This code was generated by a tool.
//     Changes to this file may cause incorrect behavior and will be lost if the code is regenerated.
// </auto-generated>
// ------------------------------------------------------------------------------
// #region Imports
import { css } from '../../../../../../Dom/Css';
// #endregion
/**
 * @public
 */
export function voiceRecorderChatToolElementJoyStyle() {
    return css `
:host {
  --chat-voice-recorder-tool-font-family: unset;
  --chat-voice-recorder-tool-font-letter-spacing: unset;
  --chat-voice-recorder-tool-font-line-height: unset;
  --chat-voice-recorder-tool-font-size: unset;
  --chat-voice-recorder-tool-font-text-decoration: unset;
  --chat-voice-recorder-tool-font-text-transform: unset;
  --chat-voice-recorder-tool-font-weight: unset;
  --chat-voice-recorder-tool-gap: unset;
  --chat-voice-recorder-tool-padding-bottom: unset;
  --chat-voice-recorder-tool-padding-left: unset;
  --chat-voice-recorder-tool-padding-right: unset;
  --chat-voice-recorder-tool-padding-top: unset;
  --chat-voice-recorder-tool-transition-duration: unset;
  --chat-voice-recorder-tool-transition-mode: unset;
  --chat-voice-recorder-tool-transition-property: unset;
  --chat-voice-recorder-tool-translate: unset;
}

@media screen and (prefers-reduced-motion: reduce) {
  :host {
    transition-duration: .01ms;
  }
}

:host {
  box-sizing: border-box;
  display: block;
  position: relative;
}

:host *, :host :before, :host :after {
  box-sizing: border-box;
  background-repeat: no-repeat;
}

:host :before, :host :after {
  text-decoration: inherit;
  vertical-align: inherit;
}

:host([hidden]) {
  display: none !important;
}

:host {
  --vr-accent: #5b8cff;
  --vr-danger: #ff4d6d;
  color: #eaeef7;
  display: block;
}

:host .vr {
  background: linear-gradient(#ffffff08, #ffffff03);
  border: 1px solid #ffffff14;
  border-radius: 16px;
  gap: 1rem;
  padding: 1rem;
  display: grid;
  box-shadow: 0 10px 30px #00000040;
}

:host .vr__mic {
  background: radial-gradient(60% 60%, #5b8cff40, #5b8cff0d);
  border: 1px solid #5b8cff40;
  border-radius: 50%;
  place-items: center;
  margin-inline: auto;
  transition: transform .12s, opacity .12s;
  display: grid;
  position: relative;
}

:host .vr__mic.is-recording {
  transform: scale(1.02);
}

:host .vr__mic.is-paused {
  opacity: .9;
}

:host .vr__ring {
  pointer-events: none;
  background: var(--ring, conic-gradient(var(--vr-accent) 0deg, #ffffff1a 0));
  border-radius: 50%;
  position: absolute;
  inset: -10px;
  -webkit-mask: radial-gradient(circle, #0000 57%, #000 58%);
  mask: radial-gradient(circle, #0000 57%, #000 58%);
}

:host .vr__btn {
  all: unset;
  cursor: pointer;
  background: #151a2e;
  border: 1px solid #ffffff14;
  border-radius: 50%;
  place-items: center;
  width: 64px;
  height: 64px;
  transition: transform .12s, background .12s, box-shadow .12s;
  display: grid;
  box-shadow: 0 4px 12px #00000040;
}

:host .vr__btn:hover {
  background: #1a2040;
  transform: translateY(-1px);
}

:host .vr__btn:active {
  transform: translateY(0);
}

:host .vr__controls {
  gap: .75rem;
  display: flex;
}

:host .vr__btn--stop {
  background: #ff4d6d1f;
  border-color: #ff4d6d59;
}

:host .vr__btn--pause {
  background: #ffffff0f;
}

:host .vr__btn--resume {
  background: #5b8cff2e;
  border-color: #5b8cff80;
}

:host .vr__dot {
  background: var(--vr-accent);
  border-radius: 50%;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 18px #5b8cffe6;
}

:host .vr__stop {
  background: var(--vr-danger);
  border-radius: 4px;
  width: 14px;
  height: 14px;
  box-shadow: 0 0 18px #ff4d6db3;
}

:host .vr__pause {
  width: 16px;
  height: 16px;
  position: relative;
}

:host .vr__pause:before, :host .vr__pause:after {
  content: "";
  background: #eaeef7;
  border-radius: 2px;
  width: 4px;
  position: absolute;
  top: 0;
  bottom: 0;
}

:host .vr__pause:before {
  left: 2px;
}

:host .vr__pause:after {
  right: 2px;
}

:host .vr__resume {
  border-top: 8px solid #0000;
  border-bottom: 8px solid #0000;
  border-left: 14px solid #eaeef7;
  width: 0;
  height: 0;
}

:host .vr__timer {
  font-variant-numeric: tabular-nums;
  color: #cfd8ff;
  text-shadow: 0 1px #0000004d;
  font-weight: 600;
  position: absolute;
  bottom: -28px;
}

:host .vr__actions {
  align-items: center;
  gap: .75rem;
  display: flex;
}

:host .vr__player {
  width: min(480px, 100%);
}

:host .vr__spacer {
  flex: auto;
}

:host .vr__action {
  all: unset;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border-radius: 8px;
  padding: .5rem .9rem;
  font-weight: 600;
  transition: background .12s, transform .12s;
}

:host .vr__action--ghost {
  background: #ffffff0f;
  border: 1px solid #ffffff1f;
}

:host .vr__action--ghost:hover {
  background: #ffffff1f;
}

:host .vr__action--primary {
  color: #0c1022;
  background: linear-gradient(#6ea3ff, #5b8cff);
  box-shadow: 0 8px 18px #5b8cff59;
}

:host .vr__action--primary:hover {
  transform: translateY(-1px);
}

    `;
}
//# sourceMappingURL=VoiceRecorderChatToolElement.Joy.js.map