/* The meter is a direct child of the widget so every theme shares the same anchor. */
.vu-meter {
  display: none;
  position: absolute;
  z-index: 5;
  left: 50%;
  width: min(var(--vu-width, 100%), calc(100% - 40px));
  height: var(--vu-height, 48px);
  transform: translate(calc(-50% + var(--vu-x, 0px)), var(--vu-y, 0px));
  align-items: center;
  gap: 2px;
  pointer-events: none;
}
.with-vu > .vu-meter {
  display: flex;
}
.vu-meter i {
  display: block;
  flex: 1;
  min-width: 0;
  height: 6%;
  background: linear-gradient(to top, var(--accent), var(--title));
  mask-image: repeating-linear-gradient(
    to top,
    #000 0 3px,
    transparent 3px 5px
  );
  -webkit-mask-image: repeating-linear-gradient(
    to top,
    #000 0 3px,
    transparent 3px 5px
  );
  transition: height 0.09s linear;
}
.vu-meter[data-mode="upper"] {
  align-items: flex-end;
}
.vu-meter[data-mode="lower"] {
  align-items: flex-start;
}
.widget.with-vu[data-placement="outside"] {
  overflow: visible;
  margin-bottom: calc(var(--vu-height, 48px) + 36px);
}
.widget.with-vu[data-placement="outside"] > .vu-meter {
  bottom: calc(-1 * (var(--vu-height, 48px) + 12px));
  width: var(--vu-width, 100%);
}
.widget.with-vu[data-placement="inside"] {
  padding-bottom: calc(var(--vu-height, 48px) + 32px);
}
.widget.with-vu[data-placement="inside"] > .vu-meter {
  bottom: 12px;
}
.widget.with-vu.card[data-placement="inside"] {
  padding-bottom: calc(var(--vu-height, 48px) + 48px);
}
.widget.with-vu.simple[data-placement="inside"],
.widget.with-vu.color-palette[data-placement="inside"] {
  padding-bottom: calc(var(--vu-height, 48px) + 12px);
}
.widget.with-vu.nutty-classic[data-placement="inside"] {
  padding-bottom: 0;
}
.widget.with-vu.nutty-classic[data-placement="inside"] .info {
  padding-bottom: calc(var(--vu-height, 48px) + 34px);
}
.widget.with-vu.nutty-classic[data-placement="inside"] > .vu-meter {
  left: calc(50% + 102px);
  max-width: calc(100% - 244px);
}
.widget.with-vu.vinyl[data-placement="inside"] {
  aspect-ratio: auto;
}
.widget.with-vu.vinyl[data-placement="inside"] .art {
  height: auto;
  aspect-ratio: 1;
}
@media (prefers-reduced-motion: reduce) {
  .vu-meter i {
    transition: none;
  }
}