.controlsFrame {
  position: relative;
  display: block;
  text-align: center;
  direction: ltr;
  white-space: nowrap;
  bottom: 1.75rem;
}
.controlsFrame > *:first-child {
  margin-inline-start: 0;
}
:global(.carbon) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.carbon) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.carbon) .button,
:global(.carbon) .button .client {
  width: inherit;
}
:global(.carbon) .button .icon {
  padding: inherit;
}
:global(.carbon) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.carbon) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.carbon) .button.playPauseButton,
:global(.carbon) .button.playPauseButton .client {
  width: inherit;
}
:global(.carbon) .button.playPauseButton .playPauseIcon,
:global(.carbon) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.carbon) .button.repeat .bg {
  background-color: var(--agate-accent-color, #8fd43a);
}
:global(.cobalt) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.cobalt) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.cobalt) .button,
:global(.cobalt) .button .client {
  width: inherit;
}
:global(.cobalt) .button .icon {
  padding: inherit;
}
:global(.cobalt) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.cobalt) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.cobalt) .button.playPauseButton,
:global(.cobalt) .button.playPauseButton .client {
  width: inherit;
}
:global(.cobalt) .button.playPauseButton .playPauseIcon,
:global(.cobalt) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.cobalt) .button.repeat .bg {
  background-color: var(--agate-accent-color, #8c81ff);
}
:global(.cobalt):global(.night) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.cobalt):global(.night) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.cobalt):global(.night) .button,
:global(.cobalt):global(.night) .button .client {
  width: inherit;
}
:global(.cobalt):global(.night) .button .icon {
  padding: inherit;
}
:global(.cobalt):global(.night) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.cobalt):global(.night) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.cobalt):global(.night) .button.playPauseButton,
:global(.cobalt):global(.night) .button.playPauseButton .client {
  width: inherit;
}
:global(.cobalt):global(.night) .button.playPauseButton .playPauseIcon,
:global(.cobalt):global(.night) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.cobalt):global(.night) .button.repeat .bg {
  background-color: var(--agate-accent-color, #fc7982);
}
:global(.copper) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.copper) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.copper) .button,
:global(.copper) .button .client {
  width: inherit;
}
:global(.copper) .button .icon {
  padding: inherit;
}
:global(.copper) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.copper) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.copper) .button.playPauseButton,
:global(.copper) .button.playPauseButton .client {
  width: inherit;
}
:global(.copper) .button.playPauseButton .playPauseIcon,
:global(.copper) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.copper) .button.repeat .bg {
  background-color: var(--agate-accent-color, #a47d66);
}
:global(.copper):global(.night) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.copper):global(.night) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.copper):global(.night) .button,
:global(.copper):global(.night) .button .client {
  width: inherit;
}
:global(.copper):global(.night) .button .icon {
  padding: inherit;
}
:global(.copper):global(.night) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.copper):global(.night) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.copper):global(.night) .button.playPauseButton,
:global(.copper):global(.night) .button.playPauseButton .client {
  width: inherit;
}
:global(.copper):global(.night) .button.playPauseButton .playPauseIcon,
:global(.copper):global(.night) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.copper):global(.night) .button.repeat .bg {
  background-color: var(--agate-accent-color, #e0b094);
}
:global(.electro) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.electro) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.electro) .button,
:global(.electro) .button .client {
  width: inherit;
}
:global(.electro) .button .icon {
  padding: inherit;
}
:global(.electro) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.electro) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.electro) .button.playPauseButton,
:global(.electro) .button.playPauseButton .client {
  width: inherit;
}
:global(.electro) .button.playPauseButton .playPauseIcon,
:global(.electro) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.electro) .button.repeat .bg {
  background-color: var(--agate-accent-color, #0359f0);
}
:global(.gallium) .button {
  height: 2.5rem;
  min-width: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium) .button .bg {
  border: transparent;
  height: 2.5rem;
  width: 2.5rem;
}
:global(.gallium) .button,
:global(.gallium) .button .client {
  width: 2.5rem;
}
:global(.gallium) .button .icon {
  padding: 0 1.25rem 0 1.25rem;
}
:global(.gallium) .button.playPauseButton {
  height: 3.75rem;
  padding: 0;
}
:global(.gallium) .button.playPauseButton .bg {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 3.75rem;
}
:global(.gallium) .button.playPauseButton,
:global(.gallium) .button.playPauseButton .client {
  width: 3.75rem;
}
:global(.gallium) .button.playPauseButton .playPauseIcon,
:global(.gallium) .button.playPauseButton .client .playPauseIcon {
  font-size: 3.75rem;
}
:global(.gallium) .button.repeat .bg {
  background-color: var(--agate-accent-color, #8b7efe);
}
:global(.gallium):global(.night) .button {
  height: 2.5rem;
  min-width: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
}
:global(.gallium):global(.night) .button .bg {
  border: transparent;
  height: 2.5rem;
  width: 2.5rem;
}
:global(.gallium):global(.night) .button,
:global(.gallium):global(.night) .button .client {
  width: 2.5rem;
}
:global(.gallium):global(.night) .button .icon {
  padding: 0 1.25rem 0 1.25rem;
}
:global(.gallium):global(.night) .button.playPauseButton {
  height: 3.75rem;
  padding: 0;
}
:global(.gallium):global(.night) .button.playPauseButton .bg {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 3.75rem;
}
:global(.gallium):global(.night) .button.playPauseButton,
:global(.gallium):global(.night) .button.playPauseButton .client {
  width: 3.75rem;
}
:global(.gallium):global(.night) .button.playPauseButton .playPauseIcon,
:global(.gallium):global(.night) .button.playPauseButton .client .playPauseIcon {
  font-size: 3.75rem;
}
:global(.gallium):global(.night) .button.repeat .bg {
  background-color: var(--agate-accent-color, #8b7efe);
}
:global(.silicon) .button {
  height: 2.5rem;
  min-width: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
}
:global(.silicon) .button .bg {
  border: transparent;
  height: 2.5rem;
  width: 2.5rem;
}
:global(.silicon) .button,
:global(.silicon) .button .client {
  width: 2.5rem;
}
:global(.silicon) .button .icon {
  padding: 0 1.25rem 0 1.25rem;
}
:global(.silicon) .button.playPauseButton {
  height: 3.75rem;
  padding: 0;
}
:global(.silicon) .button.playPauseButton .bg {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 3.75rem;
}
:global(.silicon) .button.playPauseButton,
:global(.silicon) .button.playPauseButton .client {
  width: 3.75rem;
}
:global(.silicon) .button.playPauseButton .playPauseIcon,
:global(.silicon) .button.playPauseButton .client .playPauseIcon {
  font-size: 5rem;
}
:global(.silicon) .button.repeat .bg {
  background-color: var(--agate-accent-color, #ff2d55);
}
:global(.silicon):global(.night) .button {
  height: 2.5rem;
  min-width: 2.5rem;
  margin: 0 1.25rem 0 1.25rem;
}
:global(.silicon):global(.night) .button .bg {
  border: transparent;
  height: 2.5rem;
  width: 2.5rem;
}
:global(.silicon):global(.night) .button,
:global(.silicon):global(.night) .button .client {
  width: 2.5rem;
}
:global(.silicon):global(.night) .button .icon {
  padding: 0 1.25rem 0 1.25rem;
}
:global(.silicon):global(.night) .button.playPauseButton {
  height: 3.75rem;
  padding: 0;
}
:global(.silicon):global(.night) .button.playPauseButton .bg {
  height: 3.75rem;
  width: 3.75rem;
  border-radius: 3.75rem;
}
:global(.silicon):global(.night) .button.playPauseButton,
:global(.silicon):global(.night) .button.playPauseButton .client {
  width: 3.75rem;
}
:global(.silicon):global(.night) .button.playPauseButton .playPauseIcon,
:global(.silicon):global(.night) .button.playPauseButton .client .playPauseIcon {
  font-size: 5rem;
}
:global(.silicon):global(.night) .button.repeat .bg {
  background-color: var(--agate-accent-color, #ff2d55);
}
:global(.titanium) .button {
  height: inherit;
  min-width: inherit;
  margin: inherit;
}
:global(.titanium) .button .bg {
  border: inherit;
  height: inherit;
  width: inherit;
}
:global(.titanium) .button,
:global(.titanium) .button .client {
  width: inherit;
}
:global(.titanium) .button .icon {
  padding: inherit;
}
:global(.titanium) .button.playPauseButton {
  height: inherit;
  padding: inherit;
}
:global(.titanium) .button.playPauseButton .bg {
  height: inherit;
  width: inherit;
  border-radius: inherit;
}
:global(.titanium) .button.playPauseButton,
:global(.titanium) .button.playPauseButton .client {
  width: inherit;
}
:global(.titanium) .button.playPauseButton .playPauseIcon,
:global(.titanium) .button.playPauseButton .client .playPauseIcon {
  font-size: inherit;
}
:global(.titanium) .button.repeat .bg {
  background-color: var(--agate-accent-color, rgba(0, 0, 0, 0.1));
}
.icon:global(.carbon) {
  font-size: inherit;
}
.icon:global(.cobalt) {
  font-size: inherit;
}
.icon:global(.cobalt):global(.night) {
  font-size: inherit;
}
.icon:global(.copper) {
  font-size: inherit;
}
.icon:global(.copper):global(.night) {
  font-size: inherit;
}
.icon:global(.electro) {
  font-size: inherit;
}
.icon:global(.gallium) {
  font-size: 2.5rem;
}
.icon:global(.gallium):global(.night) {
  font-size: 2.5rem;
}
.icon:global(.silicon) {
  font-size: 3.75rem;
}
.icon:global(.silicon):global(.night) {
  font-size: 3.75rem;
}
.icon:global(.titanium) {
  font-size: inherit;
}
